>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 несколько не в этом.
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, нельзя представить как дерево узлов.