Canvas HTML

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

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

инженер-программист
The Nerdery
Райан Делюка
программист
The Nerdery
HTML Canvas превосходен во многих отношениях, включая высокую производительность

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

• API: Application program interface / Интерфейс прикладных программ
• CSS: Cascading style sheet / Каскадная таблица стилей
© Copyright IBM Corporation 2013 Торговые марки

Дополнение Canvas HTML-разметкой: Часть 1. Сочетание API Страница 1 из 20
Canvas с моделью HTML/CSS
developerWorks® ibm.com/developerWorks/ru/
• 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.

ibm.com/developerWorks/ru/ developerWorks®
Листинг 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. Текст в динамичном стиле
В листинге 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 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 для перевода фокуса между

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

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

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

Код, приведенный в листинге 6, демонстрирует CSS, необходимую для размещения

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

переднего плана
Canvas {
position: absolute;
z-index: 100;
bottom: 0px;
right: 0px;
}
Canvas в качестве элемента заднего плана

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

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

Рисунок 7. Элемент 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

Каждый из отдельных компонентов пользовательского интерфейса может быть организован

с помощью 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 с дополнительным

слоем ввода данных
Поверхности ввода можно реализовать, создав элемент <div> с абсолютным

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

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

научитесь добавлять базовый пользовательский интерфейс HTML поверх игры Canvas и

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

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

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

Об авторах
Кевин Мут
Кевин Мут (Kevin Moot) интересуется компьютерной графикой с момента

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

временем превратил свое хобби в карьеру оплачиваемого фрилансера. Затем
решил формализовать свое образование и в 2011 году окончил Университет
штата Висконсин со степенью бакалавра естественных наук. Вскоре поступил на
работу в компанию Nerdery в качестве программиста, специализирующегося на
PHP, JavaScript, CSS и HTML. В число его многих других специальностей входят
реляционные базы данных/SQL и манипулирование графическими объектами.
© Copyright IBM Corporation 2013

(www.ibm.com/legal/copytrade.shtml)
Торговые марки
(www.ibm.com/developerworks/ru/ibm/trademarks/)


Canvas HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Canvas HTML

Загружено:

Авторское право:

Доступные форматы

Дополнение Canvas HTML-разметкой: Часть 1.

Сочетание API Canvas с моделью HTML/CSS

Кевин Мут 18.02.2013

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

Больше статей из этой серии

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

© Copyright IBM Corporation 2013 Торговые марки

• HTML: Hypertext Markup Language

В этой статье исследуется гибридный подход к разработке приложений, когда традиционные

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

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

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

API Canvas же предоставляет метод fillText(), который отображает текстовую строку

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

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

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

Дополнение Canvas HTML-разметкой: Часть 1. Сочетание API Страница 2 из 20

Листинг 1. Оформление текста в едином стиле с помощью HTML и CSS

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

Листинг 2. Оформление текста в едином стиле с помощью Canvas

context.font = 'italic 12px Arial';

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

Рисунок 2. Текст в динамичном стиле

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

Листинг 3. Оформление текста в динамичном стиле с помощью HTML и

Дополнение Canvas HTML-разметкой: Часть 1. Сочетание API Страница 3 из 20

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

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

Листинг 4. Оформление текста в динамичном стиле с помощью Canvas

context.font = '12px Arial';

context.font = 'italic bold 12px Arial';

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

Ниже мы покажем, как внести некоторые усовершенствования в этот подход, добавив

Дополнение Canvas HTML-разметкой: Часть 1. Сочетание API Страница 4 из 20

Теперь читателю должно быть понятно, почему визуализации текста ― нетривиальная

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

Canvas по своей сути ― просто графический построитель; для него не существует

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

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

Поскольку текст, программно отображаемый в Canvas, ― это просто растровое

Листинг 5. Предупредительный текст внутри элемента Canvas

Дополнение Canvas HTML-разметкой: Часть 1. Сочетание API Страница 5 из 20

создают HTML-разметку, например, приложения на основе Canvas, не дают скринридерам

Хорошо структурированный HTML позволяет также использовать стандартные сочетания

Рисунок 4. Использование клавиши tab для перевода фокуса между

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

На рисунке 5 показано, как элемент <input type="date"> отображается на iOS-устройстве.

Рисунок 5. Обработка <input type="date"> в iPhone

Дополнение Canvas HTML-разметкой: Часть 1. Сочетание API Страница 6 из 20

При написании семантически правильного HTML-кода, по существу, устанавливается контакт

Напротив, вся информация элемента Canvas отображается одинаково на всех устройствах.

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

Даже если попытаться имитировать гиперссылки, выдавая синий, подчеркнутый текст,

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

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

Так как Canvas не обременен накладными расходами, связанными с анализом HTML

В HTML-приложениях главный враг производительности ― это добавление, удаление и

Когда скорость имеет первостепенное значение, переход от HTML-ориентированной

Дополнение Canvas HTML-разметкой: Часть 1. Сочетание API Страница 7 из 20

производительности. За высокую производительность приходится платить низкоуровневым

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

Графические построения Canvas устраняет эти проблемы. Canvas позволяет

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

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