и с его помощью определить, какой цвет в какой позиции должен отображаться внутри градиента. Между заданными позициями цвет будет интерполироваться так, чтобы создать эффект плавного перехода или исчезновения цвета. Если не определить цвет ни в одной позиции, градиент будет окрашен однородным прозрачным черным цветом.
Методы
void addColorStop(double offset, string color)
Метод
addColorStop
определяет фиксированные цвета внутри градиента. В аргументе
color
передается строка с названием цвета в формате CSS. В аргументе
offset
передается значение с плавающей точкой в диапазоне от 0.0 до 1.0, которое представляет позицию между началом и концом градиента. Значение 0 соответствует начальной позиции, значение 1 - конечной.
Если указать два или более цвета, градиент создаст эффект плавного перехода цветов между указанными позициями. Перед первой позицией будет отображаться цвет, соответствующий первой позиции. После последней позиции градиент будет отображать цвет, соответствующий последней позиции. Если определить цвет только для одной позиции, градиент будет окрашен одним цветом. Если не определить цвет ни в одной позиции, градиент будет окрашен однородным прозрачным черным цветом.
CanvasPattern
шаблон заполнения холста на основе готового изображения
Объект
CanvasPattern
возвращается методом
createPattern
объекта
CanvasRenderingContext2D
. Объект
CanvasPattern
может использоваться в качестве значения свойств
strokeStyle
и
fillStyle
объекта
CanvasRenderingContext2D
.
CanvasRenderingContext2D
объект, используемый для создания изображений
Объект
CanvasRenderingContext2D
предоставляет набор свойств и методов для рисования двухмерных графических изображений. Следующие разделы содержат краткий обзор его возможностей. Дополнительная информация приводится в разделе 21.4, а также в справочных статьях
Canvas, CanvasGradient, CanvasPattern, ImageData
и
TextMetrics
.
Создание и отображение контуров
Очень мощная особенность элемента
Canvas
заключается в возможности строить фигуры с помощью элементарных операций рисования и затем отображать их либо в виде ограничивающих фигуру линий, либо заполнять их. Собранные воедино операции рисования называются текущим контуром. Элемент
Canvas
поддерживает возможность работы лишь с одним текущим контуром.
Для построения связанной фигуры из отдельных сегментов для каждой промежуточной операции рисования должна быть определена точка присоединения. Для этой цели
Canvas
поддерживает текущую позицию. Операции рисования неявно используют ее в качестве начальной точки и обычно переустанавливают текущую позиции в свою конечную точку. Это можно представить себе как перемещение пера по листу бумаги: когда заканчивается рисование отдельной линии, текущей становится позиция, в которой было остановлено движение пера.
Существует возможность создать в текущем контуре несколько несвязанных фигур, которые должны отображаться с одними и теми же параметрами рисования. Для отделения фигур используется метод
moveTo;
он перемещает текущую позицию в новые координаты без добавления линии, связывающей точки. Когда вызывается этот метод, создается новый вложенный контур, или подконтур, который в терминах элемента
Canvas
используется для объединения связанных операций.
Из доступных операций рисования можно упомянуть:
lineТо
– рисование отрезков прямых линий,
rect
– рисование прямоугольников,
агс
и
arcTo
– рисование дуг,
bezierCurveTo
и
quadraticCurveTo
– рисование кривых.
Как только требуемый контур сформирован, нарисовать фигуру в виде ограничивающих линий можно методом
stroke
, а залить внутреннюю область фигуры - методом
fill;
можно также вызвать оба метода.
Помимо рисования линий и заливки фигур текущий контур можно использовать как область отсечки. Пикселы в пределах этой области будут отображаться, за ее пределами - нет. Область отсечки обладает свойством накапливать изменения - вызов метода
clip
для создания области отсечки, пересекающейся с текущей, приводит к созданию новой объединенной области.
Если сегменты в любом из вложенных контуров не формируют замкнутую фигуру, операции
fill
и
clip
неявно замыкают их, добавляя виртуальный (невидимый) отрезок прямой линии, соединяющий начальную и конечную точки контура. Чтобы явно добавить такой сегмент и тем самым замкнуть фигуру, следует вызвать метод
closePath.
Чтобы проверить, находится ли точка внутри (или на границе) текущего контура, можно использовать метод
isPointInPath.
Когда контур пересекает сам себя или состоит из нескольких накладывающихся друг на друга подконтуров, понятие «внутри» определяется правилом сохранения знака. Если нарисовать одну окружность внутри другой и обе рисовать в одном и том же направлении, все, что находится внутри большей окружности, будет считаться внутренней областью контура. Если, напротив, одну окружность нарисовать по часовой стрелке, а другую - против часовой стрелки, получится кольцо, и внутренняя область меньшей окружности будет считаться за пределами контура. Это же определение внутренней области используется методами
fill
и
сlір
.
Цвета, градиенты и шаблоны
При заполнении или рисовании границ фигуры существует возможность указать, каким образом должны заполняться линии или ограниченная ими область, для чего используются свойства
fillStyle
и
strokeStyle
. Оба эти свойства могут принимать строку со значением цвета в формате CSS, а также объект
CanvasGradient
или
CanvasPattern
, который описывает градиент или шаблон. Для создания градиента используется метод
