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

Как только требуемый контур сформирован, нарисовать фигуру в виде ограничивающих линий можно методом

, а залить внутреннюю область фигуры - методом можно также вызвать оба метода.

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

для создания области отсечки, пересекающейся с текущей, приводит к созданию новой объединенной области.

Если сегменты в любом из вложенных контуров не формируют замкнутую фигуру, операции

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

Цвета, градиенты и шаблоны

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

и . Оба эти свойства могут принимать строку со значением цвета в формате CSS, а также объект или , который описывает градиент или шаблон. Для создания градиента используется метод или для создания шаблона - метод

Непрозрачный цвет в нотации CSS задается строкой в формате #RRGGBB, где RR, GG и BB - это шестнадцатиричные цифры, определяющие интенсивность красной (red), зеленой (green) и синей (blue) составляющих в диапазоне от 00 до FF. Например ярко-красный цвет описывается строкой «#FF0000». Чтобы определить степень прозрачности цвета, используется строка в формате «rgba(R, G, В, А)». В такой нотации R, G и В определяют интенсивность красной, зеленой и синей составляющих цвета в виде десятичных чисел в диапазоне от 0 до 255, а А - альфа-компонент (прозрачность), как число с плавающей точкой в диапазоне от 0.0 (полностью прозрачный цвет) до 1.0 (полностью непрозрачный цвет). Например, полупрозрачный ярко-красный цвет описывается строкой «rgba(255, 0, 0, 0.5)».

Толщина, окончания и сопряжение линий

Элемент

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

Рисование прямоугольников

Нарисовать и заполнить прямоугольник можно с помощью методов

и . Кроме того, методом можно очистить прямоугольную область.

Рисование изображений

В API объекта

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

Добавить изображение в элемент

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

Рисование текста

Метод

рисует текст, а метод рисует контуры букв, составляющих текст. Используемый шрифт определяется свойством ; значение этого свойства должно быть строкой определения шрифта в формате CSS. Выравнивание текста относительно указанной координаты X по левому краю, по правому краю или по центру определяется с помощью свойства , а выравнивание относительно указанной координаты Y - с помощью свойства .

Система координат и преобразования

По умолчанию начало системы координат холста находится в точке (0,0), в верхнем левом углу, когда координата X растет в направлении к правой границе, а координата Y - к нижней. Атрибуты

и тега определяют максимальные значения координат X и Y, а одна элементарная единица измерения в системе координат обычно соответствует одному пикселу.

Однако существует возможность преобразовать систему координат, вызывая смещение, масштабирование или вращение системы координат в операциях рисования. Делается это с помощью методов

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