• Как рисовать (и при необходимости масштабировать) изображения в элементе
<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>
– обычно с очень большими размерами, чтобы создать изображения с высоким разрешением, пригодные для печати.
21.4.1. Рисование линий и заливка многоугольников
Чтобы нарисовать прямые линии в элементе
<canvas>
и залить внутреннюю область замкнутой фигуры, образуемой этими линиями, необходимо сначала определить контур (path). Контур - это последовательность из одного или более фрагментов контура. Фрагмент контура - это последовательность из двух или более точек, соединенных прямыми линиями (или, как будет показано ниже, кривыми). Создается новый контур с помощью метода
beginPath
. А фрагмент контура -с помощью метода
moveTo.
После установки начальной точки фрагмента контура вызовом метода
moveTo
можно соединить эту точку с новой точкой прямой линией, вызвав метод
liпеТо
. Следующий фрагмент определяет контур, состоящий из двух прямых линий:
с.beginPath; // Новый контур
c.moveTo(100, 100); // Новый фрагмент контура с начальной точкой (100,100)
c.lineTo(200, 200); // Добавить линию, соединяющую точки (100,100) и (200,200)
c.lineTo(100, 200); // Добавить линию, соединяющую точки (200,200) и (100,200)
Фрагмент выше просто определяет контур - он ничего не рисует. Чтобы фактически нарисовать две линии, следует вызвать метод
stroked
, а чтобы залить область, ограниченную этими линиями, следует вызвать метод
fill
:
с.fill; // Залить область треугольника
с.stroked; // Нарисовать две стороны треугольника
Фрагмент выше (плюс некоторый дополнительный программный
код, устанавливающий толщину линий и цвет заливки) воспроизводит рисунок, изображенный на рис. 21.5.
Рис. 21.5. Простой путь, нарисованный и залитый
Обратите внимание, что фрагмент контура, определяемый выше, является «открытым». Он содержит всего две прямые линии, и его конечная точка не совпадает с начальной точкой. То есть он образует незамкнутую область. Метод
fill
выполняет заливку открытых фрагментов контуров, как если бы конечная и начальная точка фрагмента контура были соединены прямой линией. Именно поэтому пример выше выполняет заливку треугольной области, но рисует только две стороны этого треугольника.
Если бы потребовалось нарисовать все три стороны треугольника выше, можно было бы вызвать метод
closePath,
чтобы соединить конечную и начальную точки фрагмента контура. (Можно было бы также вызвать метод
lineTo(100,100),
но в этом случае получились бы три прямые линии с общей начальной и конечной точками, не образующие в действительности замкнутый фрагмент контура. При рисовании толстыми линиями результат визуально выглядит лучше, если используется метод
closePath
.)
Следует сделать еще два важных замечания, касающиеся методов
stroke
и
fill.
Во-первых, оба метода оперируют всеми элементами в текущем контуре. Допустим, что в примере выше был добавлен еще один фрагмент контура:
с.moveTo(300,100); // Новый фрагмент контура с начальной точкой (300,100);
с.lineТо(300,200); // Нарисовать вертикальную линию вниз до точки (300,200);
Если затем вызвать метод
stroke,
получились бы две соединенные вместе стороны треугольника и не связанная с ними вертикальная линия.
Во-вторых, обратите внимание, что методы
stroke
и
fill
никогда не изменяют текущий контур: можно вызвать метод
fill,
и от этого контур никуда не денется, когда вслед за этим будет вызван метод
stroke.
Когда вы закончили работу с текущим контуром и приступаете к работе с новым контуром, нужно не забыть вызывать метод
beginPath.
В противном случае вы просто добавите новый фрагмент контура в существующий контур, и старые фрагменты контура будут рисоваться снова и снова.
Пример 21.4 содержит определение функции рисования правильных многоугольников и демонстрирует использование методов
moveTo, lineTo
и
closePath
для определения фрагментов контура и методов
fill
и
stroke
для рисования контуров. Он воспроизводит рисунок, изображенный на рис. 21.6.
Пример 21.4. Рисование правильных многоугольников с помощью методов
