Кит Джереми - HTML5 для веб-дизайнеров

Элемент canvas– среда для создания динамических картинок.

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

Если вы напишете что-нибудь между открывающим и закрывающим тегом, то это будет отображено только в тех браузерах, которые не поддерживают работу с Canvas ( рис. 3.01):

Браузер не поддерживает canvas? Тогда картинка, по-старинке:

Браузер не поддерживает canvas? Тогда картинка по старинке:

Рис. 3.01.Пользователи, браузеры которых не поддерживают canvas, увидят картинку очаровательного щенка

Вся сложная работа делается на JavaScript. Сначала вам нужно будет создать переменную, указывающую на Canvas и его контекст. Слово «контекст» в данном случае означает просто API. В настоящий момент контекст есть только один – двумерный:

var canvas = document.getElementById(‘my-first-canvas’);

var context = canvas.getContext(‘2d’);

Теперь вы можете начать рисовать на двумерной поверхности элемента canvas, используя API, задокументированное в спецификации HTML5 по адресу: http://bkaprt.com/html5/. [4]

В 2D API есть довольно большое количество тех же самых инструментов, которые есть в графическом редакторе (например, Adobe Illustrator), – обводка, заливка, градиент, тень, формы, кривые Безье. Разница в том, что вместо того чтобы использовать графический интерфейс, вам нужно писать все на JavaScript.

Вот так вы определяете, что цвет обводки должен быть красным:

context.strokeStyle = ‘#990000’;

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

strokeRect (left, top, width, height)

Если вы хотите нарисовать прямоугольник размерами 100×50 пикселей, расположенный в 20 пикселях от левого края и в 30 пикселях от верхнего края элемента canvas, вы напишете так ( рис. 3.02):

context.strokeRect(20,30,100,50);

Это очень простой пример. 2D API предоставляет очень много методов: fillStyle, fillRect, lineWidth, shadowColorи многие другие.

Рис. 3.02.Прямоугольник, нарисованный на canvas

В теории любое изображение, которое можно реализовать в программе, аналогичной Illustrator, можно создать внутри элемента canvas. На практике делать это очень утомительно и, скорее всего, приведет к безумно длинному коду на JavaScript. Да и вообще смысл Canvas несколько не в этом.

Создавать картинки на лету с использованием JavaScript и Canvas – это все здорово и прекрасно, но если вы не убежденный мазохист, то зачем?

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

Одна из первых флагманских демонстраций возможностей Canvas была разработана в Mozilla Labs. Приложение Bespin ( https://bespin.mozilla.com) – редактор кода, работающий внутри браузера ( рис. 3.03).

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

Рис. 3.03.Приложение Bespin, разработанное на Canvas

Редактор кода по своей природе имеет дело с текстом. Редактор Bespin работает с текстом внутри элемента canvas– вот только на самом деле это уже не текст; это набор фигур, которые выглядят как текст.

Каждый документ в вебе можно описать объектной моделью документа (Document Object Model, DOM). DOM может содержать большое количество различных узлов, самыми важными из которых являются узлы элементов, текстовые узлы и атрибуты. У элемента canvas нет DOM. Содержимое, нарисованное внутри canvas, нельзя представить как дерево узлов.

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

Недоступность содержимого Canvas для технологий специальных возможностей – большая проблема для HTML5. К счастью, очень умные люди работают вместе в рамках рабочей группы, которая может предложить решение этой проблемы ( http://bkaprt.com/html5/2) [5].