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>.
• Как ограничивать область холста, чтобы рисование не выполнялось за пределами указанной области.
• Как добавлять тени к фигурам.
• Как рисовать (и при необходимости масштабировать) изображения в элементе <canvas> и как извлекать содержимое этого элемента в виде графического изображения.
• Как управлять созданием составных изображений, когда вновь добавляемые (просвечивающие) пикселы объединяются с существующими пикселами.
• Как получать и записывать красную, зеленую, синюю составляющие цвета и степень прозрачности пикселов в элементе <canvas>.
• Как определить, возникло ли событие мыши, когда ее указатель находился над нарисованным изображением в элементе <canvas>.
В конце этого раздела будет представлен практический пример, в котором элементы <canvas> будут использоваться для отображения небольших внутристрочных диаграмм (sparklines).
Во многих примерах работы с элементом <canvas>, которые следуют ниже, используется переменная с. Эта переменная хранит объект CanvasRenderingContext2D элемента <canvas>, но инициализация этой переменной в самих примерах обычно не показана. Если у вас появится желание опробовать эти примеры, добавьте разметку HTML, определяющую элемент <canvas> с соответствующими атрибутами width и height, и следующий программный код, инициализирующий переменную с:
var canvas = document.getElementById("my_canvas_id");
var c = canvas.getContext('2d');
Рисунки, которые встретятся вам далее, были созданы сценариями JavaScript, использующими элемент <canvas> - обычно с очень большими размерами, чтобы создать изображения с высоким разрешением, пригодные для печати.