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. Рисование правильных многоугольников с помощью методов
moveTo, lineTo
и
closePath
// Определяет правильный многоугольник с п сторонами, вписанный в окружность с центром
// в точке (х,у) и радиусом r. Вершины многоугольника находятся на окружности,
// на равном удалении друг от друга. Первая вершина помещается в верхнюю точку
// окружности или со смещением на указанный угол angle. Поворот выполняется
// по часовой стрелке, если в последнем аргументе не передать значение true,
function polygon(c, n, x, y, r, angle, counterclockwise) {
angle = angle || 0;
counterclockwise = counterclockwise || false;
c.moveTo(x + r*Math.sin(angle), // Новый фрагмент контура
у - r*Math.cos(angle)); // Исп. тригонометрию для выч. координат
var delta = 2*Math.PI/n; // Угловое расстояние между вершинами
for(var і = 1; і < n; i++) { // Для каждой из оставшихся вершин