Браузер не поддерживает canvas? Тогда картинка,по-старинке:
img src="puppy.jpg" alt="очаровательный щенок"
/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)
Если вы хотите нарисовать прямоугольник размерами 100x50 пикселей, расположенный в 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 – редактор кода, работающий внутри браузера (рис. 3.03).
Он очень мощный. Очень впечатляющий. Но это прекрасный пример того, чего с Canvas делать как раз совершенно не нужно.
Рис. 3.03. Приложение Bespin, разработанное на Canvas
Редактор кода по своей природе имеет дело с текстом. Редактор Bespin работает с текстом внутри элемента canvas – вот только на самом деле это уже не текст; это набор фигур, которые выглядят как текст.
Каждый документ в вебе можно описать объектной моделью документа (Document Object Model, DOM). DOM может содержать большое количество различных узлов, самыми важными из которых являются узлы элементов, текстовые узлы и атрибуты. У элемента canvas нет DOM. Содержимое, нарисованное внутри canvas, нельзя представить как дерево узлов.
Программы, читающие с экрана, и другие технологии специальных возможностей разбирают документ благодаря тому, что имеют доступ к объектной модели документа. Нет DOM – доступа тоже нет.
Недоступность содержимого Canvas для технологий специальных возможностей – большая проблема для HTML5. К счастью, очень умные люди работают вместе в рамках рабочей группы, которая может предложить решение этой проблемы [5].
Доступ к Canvas – очень важный вопрос, и я не хотел бы, чтобы какие-либо внесенные предложения принимались поспешно. С другой стороны, мне не хотелось бы также, чтобы Canvas задерживал все остальное в спецификации HTML5.
