21.4. Создание графики с помощью элемента <canvas>
Элемент
<canvas>
не имеет собственного визуального представления, но он создает поверхность для рисования внутри документа и предоставляет сценариям на языке JavaScript мощные средства рисования. Элемент
<canvas>
стандартизован спецификацией HTML5, но существует дольше его. Впервые он был реализован компанией Apple в броузере Safari 1.3 и поддерживался броузерами Firefox, начиная с версии 1.5, и Opera, начиная с версии 9. Он также поддерживается всеми версиями Chrome. Элемент
<canvas>
не поддерживался броузером IE до версии IE9, но он с успехом имитировался в IE6, 7 и 8 с помощью свободно распространяемого проекта ExplorerCanvas, домашняя страница которого находится по адресу http://code.google.eom/p/explorercanvas/.
Существенное отличие между элементом
<canvas>
и технологией SVG заключается в том, что при использовании элемента
<canvas>
изображения формируются вызовами методов, в то время как при использовании формата SVG изображения описываются в виде дерева XML-элементов. Функционально эти два подхода эквивалентны: любой из них может моделироваться с использованием другого. Однако внешне они совершенно отличаются, и каждый из них имеет свои сильные и слабые стороны. Например, из SVG-рисунков легко можно удалять элементы. Чтобы удалить элемент из аналогичного рисунка, созданного в элементе
<canvas>,
обычно требуется полностью ликвидировать рисунок, а затем создать его заново. Поскольку прикладной интерфейс Canvas основан на синтаксисе JavaScript, а реализация рисунков с его помощью получается более компактной (чем при использовании формата SVG), я решил описать его в этой книге. Подробные сведения вы найдете в части IV книги в справочных статьях Canvas, CanvasRenderingContext2D и родственных им.
Трехмерная графика в элементе <canvas>
На момент написания этих строк производители броузеров уже приступили к реализации прикладного интерфейса рисования трехмерной графики в элементе <canvas>. Этот прикладной интерфейс называется WebGL и является связующим звеном между JavaScript и стандартным прикладным интерфейсом OpenGL. Чтобы получить объект контекста для рисования трехмерной графики, методу
getContext
элемента
<canvas>
следует передать строку «webgl». WebGL - это обширный, сложный и низкоуровневый прикладной интерфейс, и он не описывается в этой книге: веб-разработчики, скорее всего, предпочтут использовать вспомогательные библиотеки, основанные на WebGL, чем непосредственно сам прикладной интерфейс WebGL.
**********************************************
Большая часть прикладного интерфейса Canvas определена не в элементе
<canvas>,
а в объекте «контекста рисования», получить который можно методом
getContext
элемента, играющего роль «холста». Вызов метода
getContext
с аргументом «2d» возвращает объект
CanvasRenderingContext2D
, который можно использовать для рисования двухмерной графики. Важно понимать, что элемент
<canvas>
и объект контекста рисования - это два совершенно разных объекта. Поскольку класс объекта контекста имеет такое длинное имя, я редко буду ссылаться на объект
СапvasRenderingContext2D
по имени, а буду просто называть его «объектом контекста». Аналогично, когда я буду употреблять термин «прикладной интерфейс Canvas», я буду подразумевать «методы объекта
CanvasRenderingContext2D
».
Ниже приводится HTML-страница, которая может служить простым примером использования прикладного интерфейса Canvas. Сценарий в ней рисует красный квадрат и голубой круг в элементе
<canvas>,
как показано на рис. 21.2:
<body>
Это красный квадрат: <canvas id="square" width=100 height=100></canvas>.
Это голубой круг: <canvas id="circle" width=100 height=100></canvas>.
<script>
var canvas = document.getElementById("square"); // Найти первый элемент canvas
var context = canvas.getContext("2d"); // Получить 2-мерный контекст
context.fillStyle = "#f00"; // Цвет заливки - красный
context.fillRect(0,0,100,100); // Залить квадрат
canvas = document.getElementById("circle"); // Второй элемент canvas
context = canvas.getContext("2d"); // Получить его контекст
context.beginPath; // Начать новый "контур"
context.arc(50, 50, 50, 0, 2*Math.PI, true); // Добавить круг
context.fillStyle = "#00f"; // Цвет заливки - синий
context.fill; // Залить круг
</script>
</body>
Мы видели, что грамматика SVG позволяет описывать сложные фигуры из прямых отрезков и кривых линий, которые могут быть нарисованы или залиты цветом. В прикладном интерфейсе объекта
Canvas
тоже используется понятие контура. Однако контур в данном случае описывается не как строка из символов и чисел, а как последовательность вызовов методов, таких как
beginPath
и
агс,
использованных в примере выше. После того как контур будет определен, к нему можно применять различные операции, выполняемые такими методами, как
fill
. Особенности выполнения операций определяются различными свойствами объекта контекста, такими как
fillStyle
. В следующих подразделах рассказывается:
• Как определять фигуры, как рисовать контуры фигур и как выполнять заливку внутренней области фигур.
• Как устанавливать и читать значение графических атрибутов объекта контекста элемента
<canvas>
и как сохранять и восстанавливать текущие значения этих атрибутов.
• О размерах холста, системе координат по умолчанию элемента
<canvas>
и о том, как выполнять трансформации этой системы координат.
• О различных методах рисования кривых объекта
Canvas
.
• О некоторых специализированных вспомогательных методах рисования прямоугольников.
• Как определять цвета, как работать с прозрачностью и как рисовать градиенты и выполнять заливку шаблонными изображениями.
• Об атрибутах, определяющих толщину линий и внешний вид концов линий и вершин многоугольников.
• Как рисовать текст в элементе
<canvas>.
• Как ограничивать область холста, чтобы рисование не выполнялось за пределами указанной области.