JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

// Определяет правильный многоугольник с п сторонами, вписанный в окружность с центром

// в точке (х,у) и радиусом 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

залил бы внутреннюю область квадрата.

Правило ненулевого числа оборотов

Чтобы определить, находится ли точка Р внутри контура, используя правило правило ненулевого числа оборотов, представьте луч, исходящий из

точки Р в любом направлении и уходящий в бесконечность (или, если говорить практическим языком, до некоторой точки за пределами фигуры, образуемой рассматриваемым контуром). Теперь инициализируйте счетчик нулевым значением и проследите за всеми пересечениями контура с лучом. Каждый раз, когда луч пересекает контур, рисуемый в направлении по часовой стрелке, увеличивайте счетчик на единицу. Каждый раз, когда луч пересекает контур, рисуемый в направлении против часовой стрелки, уменьшайте счетчик на единицу. Если после учета всех пересечений в счетчике получается значение, не равное нулю, следовательно, точка Р находится внутри контура. Если счетчик оказывается равным нулю, следовательно, точка Р находится снаружи.

***********************************************

21.4.2. Графические атрибуты

В примере 21.4 устанавливаются свойства

fillStyle, strokeStyle

и

lineWidth

объек; та контекста элемента

<canvas>.

Эти свойства являются графическими атрибутами, определяющими цвет, используемый методом

fill;

цвет, используемый методом

stroke;

и толщину линий, рисуемых методом

stroke.

Обратите внимание, что эти параметры не передаются методам

fill

и

stroke,

а являются общими графическими свойствами элемента

<canvas>.

Если определяется метод, рисующий некоторую фигуру, который не устанавливает эти свойства, программа, использующая его, сможет сама определять цвет фигуры, устанавливая свойства

strokeStyle

и

fillStyle

перед вызовом этого метода. Такое отделение графических свойств от команд рисования является фундаментальной особенностью прикладного интерфейса объекта

Canvas

и сродни отделению представления от содержимого, достигаемого за счет применения таблиц стилей CSS к HTML-документам.

Прикладной интерфейс объекта

Canvas

содержит 15 свойств графических атрибутов в объекте

CanvasRenderingContext2D

. Эти свойства перечислены в табл. 21.1 и подробно описываются в соответствующих разделах ниже.

Так как прикладной интерфейс объекта Canvas определяет графические атрибуты в объекте контекста, может появиться идея вызвать метод

getContext

несколько раз, чтобы получить несколько объектов контекста. Если бы это удалось, можно было бы определить для каждого из них различные атрибуты и использовать их как различные кисти разного цвета и разной толщины. К сожалению, элемент

<canvas>

нельзя использовать таким способом. Каждый элемент

<canvas>

имеет только один объект контекста, и каждый вызов метода

getContext

возвращает один и тот же объект

CanvasRenderingContext2D

.

Тем не менее, несмотря на то что прикладной интерфейс объекта

Canvas

позволяет определить только один набор графических атрибутов, он предусматривает возможность сохранять текущие графические свойства, чтобы их можно было изменить и позднее легко восстановить прежние значения. Метод

save

помещает текущие значения графических свойств в стек. Метод restore выталкивает их со стека и восстанавливает самые последние сохраненные значения. В множество сохраняемых свойств входят все свойства, перечисленные в табл. 21.1, а также текущее преобразование системы координат и область отсечения (обе особенности рассматриваются ниже). Важно отметить, что текущее определение контура и координаты текущей точки не входят в множество сохраняемых графических свойств и не могут сохраняться и восстанавливаться.