и технологией 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
, и следующий программный код, инициализирующий переменную с: