Дополнение Canvas HTML-разметкой: Часть 1. Сочетание API Canvas с моделью HTML/CSS

Гибриды, которые убивают двух зайцев

HTML Canvas превосходен во многих отношениях, включая высокую производительность при низких накладных расходах и возможность прямого манипулирования пикселями. Однако по нескольким направлениям Canvas уступает HTML: в области отрисовки текста, SEO, доступности и аппаратно-независимой разметки. В этой статье сравниваются сильные стороны традиционной HTML-модели и API Canvas. Рассматривается идея гибридизации приложений HTML/Canvas с целью использования основных преимуществ того и другого. Читатель познакомится также с различными методами наложения HTML-элементов поверх элемента Canvas.

Кевин Мут, инженер-программист, The Nerdery

Фото Кевина МутаКевин Мут (Kevin Moot) интересуется компьютерной графикой с момента появления на его машине Apple IIe (с ее широким спектром из шести цветов и невероятным разрешением 280x192) таких игр, как "Мальчик-с-пальчик". Работал с технологией Canvas, входящей в HTML5, при создании нескольких передовых Web-сайтов и включает в список своих специализаций HTML/CSS, JavaScript и .NET. В настоящее время ― разработчик интерактивного программного обеспечения в компании The Nerdery.



Райан Делюка, программист, The Nerdery

Фото Райана ДелюкиРайан Делюка (Ryan DeLuca) занимается программированием с 1998 года и со временем превратил свое хобби в карьеру оплачиваемого фрилансера. Затем решил формализовать свое образование и в 2011 году окончил Университет штата Висконсин со степенью бакалавра естественных наук. Вскоре поступил на работу в компанию Nerdery в качестве программиста, специализирующегося на PHP, JavaScript, CSS и HTML. В число его многих других специальностей входят реляционные базы данных/SQL и манипулирование графическими объектами.



18.02.2013

Введение

В первой части этого цикла из двух статей говорится о создании приложений, которые сочетают в себе преимущества API Canvas и модели HTML/CSS. API Canvas хорошо подходит для Web-приложений, требующих высокой производительности и обработки графики с малыми издержками. Однако приложениям, целиком построенным на Canvas, недостает возможностей традиционной модели HTML/CSS. Мы покажем, как использовать множество полезных свойств HTML/CSS, которые трудно или невозможно реализовать в Canvas.

Часто используемые сокращения

  • API: Application program interface / Интерфейс прикладных программ
  • CSS: Cascading style sheet / Каскадная таблица стилей
  • HTML: Hypertext Markup Language
  • UI: User Interface / Интерфейс пользователя

В этой статье исследуется гибридный подход к разработке приложений, когда традиционные компоненты HTML применяются наряду с элементами Canvas. Обсуждается мотивация такого подхода, в том числе, почему чистая реализации на основе Canvas может оказаться далекой от идеала, а также сильные и слабые стороны традиционной модели HTML по сравнению с API Canvas. Несколько примеров помогут читателю спланировать макет и взаимодействие между элементами HTML и Canvas при разработке приложения.

В разделе Загрузка приведен исходный код примеров, приведенных в этой статье.


Преимущества модели на базе HTML и CSS

В некоторых сценариях традиционная модель Web-разработки с использованием HTML и CSS не имеет себе равных. В этом разделе рассматриваются наиболее важные преимущества модели HTML, которые плохо или вообще не поддерживаются в API Canvas ― в частности, мощная поддержка текста и преимущества, связанные с семантически значимой HTML-разметкой.

Мощная поддержка текста HTML

Одним из основных преимуществ HTML является возможность легко аннотировать текст с помощью наглядных подсказок, начиная от тегов форматирования, таких как <b></b>, и заканчивая CSS-правилами типа font-weight:bold.

API Canvas же предоставляет метод fillText(), который отображает текстовую строку в качестве растрового изображения. Это простой, низкоуровневый вызов с рядом ограничений. Одно из главных ограничений - это то, что к текстовой строке, отображаемой с помощью fillText(), можно применить только одно правило единого стилевого оформления. «Правило стилевого оформления» в данном контексте можно рассматривать как единое правило, которое задает начертание шрифта, его размер, цвет и т.д. (аналогично правилу CSS).

Текст, оформленный в едином стиле

Рассмотрим текст, представленный на рисунке 1.

Рисунок 1. Пример текста
Пример текста

Так как весь текст подчиняется правилу единого стиля — красный, курсив, шрифт Arial, — его можно одинаково легко воспроизвести с помощью HTML/CSS или Canvas.

В листингах 1 и 2 сравнивается код для отображения этого текста с помощью HTML и CSS и с помощью Canvas. Действующий пример см. в разделе Ресурсы.

Листинг 1 отображает текст, изображенный на рисунке 1, с помощью HTML и CSS.

Листинг 1. Оформление текста в едином стиле с помощью HTML и CSS
<style>
    .uniform-style {
        font: italic 12px Arial;
        color: red;
    }   
</style>
<span class="uniform-style">
    Variety is the spice of life!
</span>

В листинге 2 показан тот же текст, оформленный с использованием Canvas.

Листинг 2. Оформление текста в едином стиле с помощью Canvas
var Canvas = document.getElementById('my_Canvas');
var context = Canvas.getContext('2d');

context.font = 'italic 12px Arial';
context.fillStyle = 'red';
context.fillText('Variety is the spice of life!', 0, 50);

Текст в динамичном стиле

Рассмотрим текст, представленный на рисунке 2.

Рисунок 2. Текст в динамичном стиле
Текст Variety is the spice of life начертан шрифтом разного цвета и размера.

В листинге 3 приведены правила CSS, необходимые для визуализации этого текста.

Листинг 3. Оформление текста в динамичном стиле с помощью HTML и CSS
<style>
    .dynamic-style {
        font: 12px Arial;
        color: blue;
    }
    .dynamic-style strong {
        font-size : 18px;
        color: green;
    }    
    .dynamic-style em {
        color: red;
        font-weight: bold;
        font-style: italic;
    }    
</style>
<span class="dynamic-style">
    <strong>Variety</strong> is the <em>spice of life</em>!
</span>

В API Canvas нет тегов HTML или классов CSS, которые позволяли бы указывать на использование различных стилей шрифта, поэтому оформление текстового блока из предыдущего примера значительно усложняется.

Так как API Canvas функционирует как последовательный конечный автомат, для создания эффекта, изображенного на рисунке 2, требуется то, что можно описать как подход «пишущей машинки». Нужно выбрать стиль, набрать часть текста, которая должна быть оформлена этим стилем, затем выбрать другой стиль, напечатать следующую часть текста и т.д.

В общем случае это можно осуществить с использованием следующего алгоритма:

  1. Указать стиль, который будет использоваться для следующей части текста (18px Arial, зеленый).
  2. Воспроизвести в Canvas следующую часть текста (Variety).
  3. Переместиться вправо на определенное количество пикселов (60).
  4. Повторить шаги 1-3 для каждой части текста.

В листинге 4 показана простейшая реализация этого алгоритма.

Листинг 4. Оформление текста в динамичном стиле с помощью Canvas
context.font = '18px Arial';
context.fillStyle = 'green';
context.fillText('Variety', 0, 50);
context.translate(60, 0);  //перемещение на 60 пикселей вправо (a)

context.font = '12px Arial';
context.fillStyle = 'blue';
context.fillText('is the', 0, 50);
context.translate(35, 0); //перемещение на 35 пикселей вправо (b)

context.font = 'italic bold 12px Arial';
context.fillStyle = 'red';
context.fillText('spice of life!', 0, 50); // (c)

На рисунке 3 показано, как будут выглядеть три отдельных текстовых блока по мере их последовательного отображения.

Рисунок 3. Отображение текста в Canvas
Отображение текста в Canvas

Ниже мы покажем, как внести некоторые усовершенствования в этот подход, добавив еще один уровень абстракции поверх собственной функции Canvas fillText(). Однако независимо от подхода, в основе лежит все тот же алгоритм пишущей машинки.

Следует отметить, что большинство стилей текста, привычных при использовании HTML/CSS, таких как перенос слов, межбуквенный интервал и высота строки, в API Canvas изначально не поддерживается. В случае необходимости придется изменять алгоритм и реализовать эти функции самостоятельно.

Теперь читателю должно быть понятно, почему визуализации текста ― нетривиальная задача в API Canvas и почему, когда нужно отформатировать текст с минимальным количеством усилий, прибегают к традиционной модели HTML.


Значимая семантика HTML

Основополагающим принципом хорошего Web-дизайна является значимая, семантически правильная HTML-структура. Разметка HTML с правильной и осмысленной структурой дает целый ряд преимуществ.

Canvas по своей сути ― просто графический построитель; для него не существует концепции значимой разметки, и в приложениях, написанных исключительно средствами Canvas, преимущества значимой разметки HTML, по существу, теряются. Например, с точки зрения поисковых систем и слабовидящих пользователей элемент Canvas выглядит как черный ящик небытия.

Ниже мы рассмотрим несколько преимуществ значимой разметки HTML.

Учет требований поисковый систем

Поисковые системы создают свои индексы на основе информации, считываемой автоматическими поисковыми роботами — когда поисковый паук посещает Web-страницы, он анализирует HTML, чтобы извлечь как можно более значимую информацию.

Поскольку текст, программно отображаемый в Canvas, ― это просто растровое изображение, поисковые пауки его полностью игнорируют. Таким образом, важно понимать, что если приложение разрабатывается исключительно средствами Canvas, поисковые машины извлекут очень мало контекстной информации из вашей страницы.

Тем не менее, поисковые системы все же смогут прочесть любой предупредительный текст внутри элемента <Canvas>, предназначенный для несовместимых с HTML5 браузеров, как показано в листинге 5.

Листинг 5. Предупредительный текст внутри элемента Canvas
<Canvas>
   We are sorry, your browser doesn't support HTML5!
</Canvas>

Это не только проблема Canvas — отсутствие поддержки поисковых машин всегда была проблемой приложений, написанных для плагинов Web-браузеров, таких как Flash и Silverlight.

Доступность

Пользователи с ухудшенным зрением для чтения Web-страниц полагаются на инструменты преобразования текста в речь (скринридеры). Структурированная разметка HTML позволяет скринридерам различать заголовки, колонтитулы, списки и т.п. Приложения, которые не создают HTML-разметку, например, приложения на основе Canvas, не дают скринридерам никаких признаков, по которым можно распознавать содержание.

Хорошо структурированный HTML позволяет также использовать стандартные сочетания клавиш для перемещения по странице. Например, клавиша tab переносит фокус на следующую ссылку, как показано на рисунке 4.

Рисунок 4. Использование клавиши tab для перевода фокуса между ссылками на странице
Снимок экрана сайта W3C

Даже плагины браузера, такие как Flash и Silverlight, добились больших успехов в обеспечении доступности, поддерживая часто используемые сочетания клавиш. К сожалению, Canvas не предоставляет аналогичных встроенных механизмов обеспечения доступности.

Устройства и агенты пользователей

В конечном итоге решение, как именно будет отображаться страница, выносит агент пользователя. Устройства могут интерпретировать одну и ту же HTML-разметку по-разному. Например, нажатие элемента <input type="text"> заставляет большинство мобильных устройство отображать экранную клавиатуру, чтобы пользователь мог ввести текст. Браузеры, соответствующие спецификации HTML5, поддерживают еще более широкий спектр типов входных данных, таких как адреса электронной почты, Web-сайты, номера телефона, даты и т.д.

На рисунке 5 показано, как элемент <input type="date"> отображается на iOS-устройстве. Браузер автоматически отображает полнофункциональный элемент выбора даты; для его реализации не требуется никакого дополнительного кода, помимо определения типа элемента input как date.

Рисунок 5. Обработка <input type="date"> в iPhone
Запись даты на iphone

При написании семантически правильного HTML-кода, по существу, устанавливается контакт с агентами пользователя в предположении, что они в состоянии представить информацию для пользователей данного конкретного устройства наилучшим образом.

Напротив, вся информация элемента Canvas отображается одинаково на всех устройствах. Контакт с агентом пользователя нарушается; ему больше не доверяют представление содержания своему пользователю.

Поддержка гиперссылок

По своей сути, Web построен на гиперссылках — трудно представить себе мир без них. Помимо того что пользователи могут переходить по ссылкам, современные агенты предоставляют им богатые дополнительные контекстуальные возможности: открытие страницы в новой вкладке, копирование адреса ссылки, отправка ссылки по электронной почте и т.п.

Хотя Canvas позволяет визуализировать текст, технически концепция гиперссылок в нем отсутствует.

Даже если попытаться имитировать гиперссылки, выдавая синий, подчеркнутый текст, агент пользователя не поймет, что это настоящая гиперссылка, и не сможет предложить пользователю никаких полезных контекстуальных функций.


Преимущества API Canvas

Перечисленные недостатки Canvas-приложений создают довольно неприглядную картину. Однако у них есть ряд своих преимуществ. Главное из них ― высокая производительность при обработке графики и возможность согласованного представления информации на разных устройствах.

Производительность при обработке графики

Существуют задачи, которые может решить и HTML, и Canvas, такие как визуализация изображений, текста и анимации.

Так как Canvas не обременен накладными расходами, связанными с анализом HTML и поддержанием иерархической модели документов, в Canvas эти задачи неизменно решаются быстрее.

В HTML-приложениях главный враг производительности ― это добавление, удаление и обновление узла. Эти изменения модели документа часто заставляют браузер заново обрабатывать или перекомпоновывать всю страницу, что может быть очень ресурсоёмким процессом. Обновление модели документа много раз в секунду, необходимое в приложении реального времени, может сильно замедлить работу браузера.

Когда скорость имеет первостепенное значение, переход от HTML-ориентированной архитектуры на Canvas-ориентированную может быть залогом достижения максимальной производительности. За высокую производительность приходится платить низкоуровневым API вместо мощного языка разметки HTML и гибкости CSS.

Согласованность между устройствами

Согласованное, кроссплатформенное представление всегда трудно давалось традиционной модели HTML/CSS из-за разницы в механизмах макетирования браузеров. Хотя Web-страницы на разных платформах могут выглядеть очень похожими, трудно достичь согласованного дизайна «с точностью до пиксела».

Графические построения Canvas устраняет эти проблемы. Canvas позволяет контролировать внешний вид графики и текста на уровне пикселей и гарантировать, что результат будет абсолютно одинаковым на всех платформах.


Обоснование гибридов Canvas/HTML

При создании Canvas-ориентированных приложений для преодоления недостатков Canvas можно использовать особенности традиционной модели HTML/CSS.

Как уже отмечалось, одним из главных недостатков Canvas является трудность реализации мощных, доступных компонентов пользовательского интерфейса. При выборе наилучшего подхода для реализации пользовательского интерфейса полезно оценить требования, предъявляемые к его элементам. В число критериев могут входить:

  • требуемое содержание элемента пользовательского интерфейса;
  • необходимая частота обновления этого содержания;
  • желаемый уровень интерактивности.

Необходимое требование в любой из этих областей может в значительной мере повлиять на выбор реализации. Например, если желаемое содержание ― это простое текстовое отображение того или иного аспекта приложения, базовый HTML-элемент, вероятно, будет наиболее эффективным и не приведет к какой-либо потере производительности. Если же элемент должен быть анимированным или функционально насыщенным и часто обновляемым, то наилучшим подходом может оказаться использование Canvas. Когда нужна простота реализации интерактивности, HTML элементы обычно обеспечивают наиболее естественный подход, особенно в сочетании с функциями, предоставляемыми такими библиотеками, как jQuery.

Ниже мы рассмотрим ряд ситуаций, в которых хорошо подходит гибрид Canvas/HTML.

Быстрое создание прототипов

Используя HTML и CSS, вместо Canvas, можно быстрее создать демонстрационный прототип. Например, рассмотрим приложение, содержащее меню. Меню хорошо реализуется структурами HTML/CSS, которые к тому же позволяют использовать огромное количество существующих библиотек, таких как плагины jQuery, поэтому по количеству требуемых усилий реализация меню в HTML несопоставима с решением эквивалентной задачи средствами Canvas. Низкая производительность не страшна, так как прототип ― всего лишь доказательство концепции, а не полностью оптимизированная система.

Впоследствии, когда все детали приложения конкретизированы, HTML и CSS можно будет заменить чистым Canvas. В случае примера с меню, преобразование меню в Canvas для конечного продукта заметно улучшит производительность благодаря исключению зависимости от модели документа браузера.

Инструменты разработки

Для инструментов разработки естественным образом подходят HTML и CSS, учитывая простоту использования HTML-разметки для отображения больших объемов информации. Примером может служить консоль для целей отладки. Такая консоль может отображать статистику в кадрах в секунду, список всех объектов в приложении с их координатами и т.п.

Опять же, снижение производительности, вносимое элементами HTML, в этом случае не представляет большую проблему, потому что инструмент предназначен только для разработчиков и никогда не будет отображаться конечному пользователю.

Накладной пользовательский интерфейс

Если приложению требуется богатый интерфейс пользователя, сочетающий в себе текст с такими элементами, как флажки и раскрывающиеся списки, то естественное решение ― HTML. Для воспроизведения этих компонентов в Canvas может потребоваться очень много времени, и приложение будет, скорее всего, не слишком наглядным.

И наоборот, преимущества HTML могут обеспечить богатый пользовательский опыт. Например, набор компонентов пользовательского интерфейса на основе HTML может содержать "накладной" дисплей, который "плавает" поверх области Canvas.

Чтобы минимизировать влияние на производительность в приложениях реального времени, необходимо следить за тем, чтобы в модели документа производилось как можно меньше изменений (обновлений элементов, вставок и удалений). Если документ часто обновляется, приложение может работать чрезвычайно медленно.

Вспомогательные интерфейсы пользователя

Когда элемент пользовательского интерфейса появляется за пределами интерактивного компонента реального времени приложения, это прекрасная возможность для использования HTML и CSS. Например, элемент пользовательского интерфейса может появляться только во время вступительной последовательности или приостановки приложения.

Еще один хороший пример применения вспомогательного пользовательского интерфейса на базе HTML ― интерфейс загрузки и сохранения игры. Когда пользователь сохраняет игру, она приостанавливается, и влияние на производительность приложения в режиме реального времени не имеет значения. HTML/CSS позволяет быстро разработать такой интерфейс с использованием всех преимуществ структурированной разметки.


Реализация гибридов HTML/Canvas

В этом разделе рассматриваются несколько базовых подходов к объединению элемента Canvas с другими элементами HTML в макете Web-страницы. Не будучи исчерпывающими, изложенные ниже подходы, однако, демонстрируют, как лучше всего использовать сильные стороны HTML и Canvas при сведении к минимуму их недостатков. Планируя архитектуру приложения, подумайте о том, какой подход (или набор подходов) лучше всего подходит для ваших целей.

Следующие сценарии предполагают наличие двух основных компонентов:

  • элемента Canvas, содержащего главным образом компоненты графики и анимации;
  • HTML-элементов, содержащих различные компоненты пользовательского интерфейса, такие как меню, элементы навигации, формы и т.д.

Вписанный элемент Canvas

Тег <Canvas> считается элементом уровня блока, поэтому простейший способ для объединения элементов HTML и Canvas ― просто вставить элемент <Canvas> в тело документа. Поскольку относительное расположение элемента будет определено по умолчанию, элемент Canvas впишется в остальную часть документа без всякой специальной разметки или CSS.

Canvas в качестве элемента переднего плана

Элемент <Canvas> может быть позиционирован на странице абсолютно с помощью z-индекса, так что он будет казаться "висящим" на переднем плане.

Этот подход хорош для Canvas-приложений, не взаимодействующих с другими элементами HTML на странице, подобно встраиваемому Flash приложению.

Так как Canvas находится на самом переднем плане, он будет захватывать все виды ввода данных пользователем (нажатие кнопок мыши, события сенсорного экрана и т.д.).

Рисунок 6 иллюстрирует способ позиционирования Canvas в качестве абсолютно позиционируемого элемента переднего плана.

Рисунок 6. Элемент Canvas над документом
Элемент Canvas над документом

Кликните, чтобы увидеть увеличенное изображение

Рисунок 6. Элемент Canvas над документом

Элемент Canvas над документом

Код, приведенный в листинге 6, демонстрирует CSS, необходимую для размещения элемента на переднем плане с помощью большого значения z-индекса.

Листинг 6. Код CSS, позиционирующий Canvas в качестве элемента переднего плана
Canvas {
    position: absolute;
    z-index: 100;
    bottom: 0px;
    right: 0px;
}

Canvas в качестве элемента заднего плана

Элемент <Canvas> может использоваться и для отображения содержимого в качестве фона Web-страницы.

Этот подход может применяться при создании функционально насыщенного, анимированного фона для стандартного HTML-контента. Фон Canvas проявляется сквозь прозрачные области документа.

Рисунок 7. Элемент Canvas под документом
Элемент Canvas под документом

Кликните, чтобы увидеть увеличенное изображение

Рисунок 7. Элемент Canvas под документом

Элемент Canvas под документом

Код в листинге 7 показывает, как правильно расположить элемент Canvas в качестве нижнего слоя, установив отрицательное значение z-индекса.

Листинг 7. Код CSS для позиционирования Canvas в качестве элемента фона
Canvas {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
}

Наслоение поверх Canvas

Другой подход заключается в размещении одного или нескольких HTML-элементов поверх элемента Canvas. Как показано на рисунке 8, этот подход может быть полезным в приложениях с богатым пользовательским интерфейсом. В этом случае HTML-компоненты пользовательского интерфейса будут "плавать" поверх графического слоя Canvas.

Рисунок 8. Элементы HTML поверх Canvas
Элементы HTML поверх Canvas

Кликните, чтобы увидеть увеличенное изображение

Рисунок 8. Элементы HTML поверх Canvas

Элементы HTML поверх Canvas

Каждый из отдельных компонентов пользовательского интерфейса может быть организован с помощью CSS, так чтобы он отображался в определённом положении на переднем плане поверх Canvas.

В листинге 8 приведен пример позиционирования компонента пользовательского интерфейса, содержащегося в элементе <div>, с помощью установки большого значения z-индекса.

Листинг 8. Код CSS для позиционирования HTML-компонента в качестве элемента переднего плана
div.user-interface {
    position: absolute;
    z-index: 100;
    top: 50px;
    left: 50px;
}

Поскольку компоненты пользовательского интерфейса на основе HTML находятся в самом верхнем слое, они по умолчанию будут реагировать на пользовательский ввод. Например, если некий элемент содержит элемент пользовательского интерфейса, такой как флажок, полосу прокрутки или гиперссылку, то щелчки кнопки мыши будут перехватываться этими элементами. Как правило, нажатие на один из них никогда не доходит до нижележащего слоя Canvas. Однако в некоторых случаях может понадобиться, чтобы данные, вводимые пользователем, попадали в Canvas.

Определенный HTML-элемент можно настроить так, что он будет игнорировать ввод данных пользователем, установив свойство CSS pointer-events, как показано в листинге 9. При значении свойства pointer-events none элемент игнорирует все поведение, которое обычно ассоциируется с вводом пользователя — весь текст, гиперссылки и элементы формы в пределах этого элемента <div> будут невыделяемыми и практически неприменимыми.

Листинг 9. Код CSS для задания свойства pointer-events
div.user-interface {
    position: absolute;
    z-index: 100;
    top: 50px;
    left: 50px;
    pointer-events:none;
}

События ввода проникают в нижележащий слой, где их может перехватить элемент <Canvas>. Например, обработчик событий может находиться в элементе <Canvas>, захватывающем события мыши.

Свойство pointer-event поддерживается всеми браузерами, за исключением Internet Explorer (для имитации подобного поведения в Internet Explorer существуют обходные пути).

Расположение поверх Canvas с использованием поверхности ввода

Альтернативный способ перехвата пользовательского ввода похож на предыдущий, но не требует использования свойства CSS pointer-events:none. При этом подходе поверх элементов Canvas и пользовательского интерфейса HTML добавляется один дополнительный слой. Его единственная цель ― захват данных, вводимых пользователем.

Это удобно для сценариев, где элементы HTML используются только для отображения информации. Никакая интерактивность элементов HTML-интерфейса невозможна, потому что поверхность ввода перехватывает все события, прежде чем они достигнут нижележащих элементов. Пример приведен на рисунке 9.

Рисунок 9. Расположение элементов HTML над Canvas с дополнительным слоем ввода данных
Расположение элементов HTML над Canvas с дополнительным слоем ввода данных

Поверхности ввода можно реализовать, создав элемент <div> с абсолютным позиционированием той же ширины и высоты, что и элемент Canvas. Оставляя <div> пустым, вы, по существу, делаете слой прозрачным, и единственной его целью является захват данных, вводимых пользователем.

Для захвата вводимых пользователем данных достаточно прикрепить все обработчики событий к этому элементу <div>. Так как это самый верхний элемент, весь пользовательский ввод будет перехвачиваться им, а не нижележащими элементами.


Последующие шаги

Во второй статье этого цикла мы разовьем понятия, представленные в этой статье, и разберем пример реализации гибридного приложения Canvas/HTML. Шаг за шагом, вы научитесь добавлять базовый пользовательский интерфейс HTML поверх игры Canvas и создавать элементы пользовательского интерфейса Canvas. Кроме того, во второй части мы обсудим вопрос об анимации и визуализации текста и покажем, как использовать преимущества HTML и Canvas.

Рисунок 10 иллюстрирует идею игры, которая создается во второй части.

Рисунок 10. Пример приложения, сочетающего элементы HTML и Canvas
Пример приложения, сочетающего элементы HTML и Canvas

Заключение

В этой статье говорится о сильных и слабых сторонах модели HTML по сравнению с API Canvas, причинах создания гибридных приложений Canvas/HTML и различных подходах к иерархическому представлению элементов HTML и Canvas.

Теперь, чтобы понять, как выбрать архитектуру, оптимально использующую сильные стороны HTML и Canvas, прочтите вторую статью этого цикла, которая учит использовать приобретенные знания для создания космического шутера.


Загрузка

ОписаниеИмяРазмер
Исходный код примера для статьиCanvashtmlpt1sourcecode.zip2 КБ

Ресурсы

Научиться

Получить продукты и технологии

  • jQuery: эта популярная библиотека JavaScript упрощает анализ HTML-документа, обработку событий, анимацию и Ajax-взаимодействие, ускоряя Web-разработку.
  • Modernizr: эта библиотека JavaScript с открытым исходным кодом помогает строить Web-сайты нового поколения на базе HTML5 и CSS3.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, Open source
ArticleID=858364
ArticleTitle=Дополнение Canvas HTML-разметкой: Часть 1. Сочетание API Canvas с моделью HTML/CSS
publish-date=02182013