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

шаблон заполнения холста на основе готового изображения

Объект

возвращается методом объекта . Объект может использоваться в качестве значения свойств и объекта .

объект, используемый для создания изображений

Объект

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

Создание и отображение контуров

Очень мощная особенность элемента

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

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

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

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

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

Из доступных операций рисования можно упомянуть:

– рисование отрезков прямых линий, – рисование прямоугольников, и – рисование дуг, и – рисование кривых.

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

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

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

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

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

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

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

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

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