Шрифт:
Если затем вызвать метод
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++) { // Для каждой из оставшихся вершин
angle += counterclockwise?-delta:delta; // Скорректировать угол
c.lineTo(x + r*Math.sin(angle), // Линия к след, вершине
у - r*Math.cos(angle));
}
с.closePath; // Соединить первую вершину с последней
}
// Создать новый контур и добавить фрагменты контура, соответствующие многоугольникам-
с.beginPath;
polygon(c, 3, 50, 70, 50); // Треугольник
polygon(c, 4, 150, 60, 50, Math.PI/4); // Квадрат
polygon(c, 5, 255, 55, 50); // Пятиугольник
polygon(c, 6, 365, 53, 50, Math.PI/6); // Шестиугольник
polygon(c, 4, 365, 53, 20, Math.PI/4, true); // Квадрат в шестиугольнике
// Установить некоторые свойства, определяющие внешний вид рисунка
c.fillStyle = "ftссс"; // Светло-серый фон внутренних областей
с.strokeStyle = "#008"; // темно-синие контуры
с.lineWidth = 5; // толщиной пять пикселов.
// Нарисовать все многоугольники (каждый создается в виде отдельного фрагмента контура)
// следующими вызовами
с.fill; // Залить фигуры
c.stroke; // И нарисовать контур
Обратите
внимание
, что в этом примере внутри шестиугольника рисуется квадрат. Квадрат и шестиугольник являются отдельными фрагментами контура, но они перекрываются. Когда это происходит (или когда один фрагмент контура пересекается с самим собой), элементу <canvas>
приходится выяснять, какая область является внутренней для фрагмента контура, а какая - внешней. Для этого элемент <canvas>
использует алгоритм, известный как «правило ненулевого числа оборотов» («nonzero winding rule»). В данном случае внутренняя область квадрата не заливается светло-серым цветом, потому что квадрат и шестиугольник рисовались в противоположных направлениях: вершины шестиугольника соединялись линиями в направлении по часовой стрелке, а вершины квадрата - против часовой стрелки. Если бы рисование квадрата также выполнялось в направлении по часовой стрелке, метод fill
залил бы внутреннюю область квадрата.