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, а также текущее преобразование системы координат и область отсечения (обе особенности рассматриваются ниже). Важно отметить, что текущее определение контура и координаты текущей точки не входят в множество сохраняемых графических свойств и не могут сохраняться и восстанавливаться.
Поделиться:
Популярные книги
Стихи и песни
Проза:
русская классическая проза
5.00
рейтинг книги
АН (цикл 11 книг)
Аномальный наследник
Фантастика:
фэнтези
героическая фантастика
попаданцы
аниме
5.60
рейтинг книги
Adobe InDesign CS3
Видеосамоучитель
Компьютеры и Интернет:
программное обеспечение
5.00
рейтинг книги
Первый среди равных. Книга X
10. Первый среди Равных
Фантастика:
попаданцы
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Воины
Фантастика:
фэнтези
7.00
рейтинг книги
Егерь. Звери и люди
11. Зверолов
Фантастика:
рпг
фэнтези
фантастика: прочее
попаданцы
5.00
рейтинг книги
Дневники
5.00
рейтинг книги
Нью-Йорк
The Big Book
Проза:
историческая проза
6.00
рейтинг книги
Я все еще не царь. Книга XXVI
26. Дорогой барон!
Фантастика:
попаданцы
аниме
5.00
рейтинг книги
Отморозок 4
4. Отморозок
Фантастика:
попаданцы
фантастика: прочее
5.00
рейтинг книги
Дитя прибоя
Дитя прибоя
Фантастика:
боевая фантастика
попаданцы
фэнтези
5.25
рейтинг книги
Рассказы старых переплетов
Документальная литература:
биографии и мемуары
прочая документальная литература
5.00
рейтинг книги
История великих путешествий. Том 1. Открытие Земли
Приключения:
путешествия и география
5.00
рейтинг книги
Дружба - Этико-психологический очерк
Научно-образовательная:
психология
5.00
рейтинг книги