"hsl(60, 100%, 75%)" , // Насыщенный желтый, немного светлее
"hsl(60. 100%, 25%)", // Насыщенный желтый, немного темнее
"hsla(60, 100%, 50%, 0.5)", // Насыщенный желтый, прозрачный на 50%
];
При использовании формата HSL цвет описывается тремя числами, определяющими тон (hue), насыщенность (saturation) и яркость (lightness). Тон (hue) - это величина угла в цветовом круге. Значение 0 соответствует красному цвету, 60 - желтому, 120 - зеленому, 180 - бирюзовому, 240 - синему, 300 - сиреневому и 360 -опять красному. Насыщенность описывает интенсивность цвета и определяется в процентах. Цвета с насыщенностью 0% являются оттенками серого. Яркость описывает степень яркости цвета и также определяется в процентах. Любой цвет в формате HSL со 100-процентной яркостью является белым цветом, а любой цвет с яркостью 0% - черным. В формате HSLA цвет описывается так же, как в формате HSL, но с дополнительным значением альфа-канала, которое изменяется в диапазоне от 0.0 (прозрачный) до 1.0 (непрозрачный).
Если необходимо использовать полупрозрачные цвета, но нежелательно явно указывать значение альфа-канала для каждого цвета, или если необходимо добавить полупрозрачность к непрозрачному изображению или шаблону (например), требуемое значение непрозрачности можно присвоить свойству
globalAlpha
. Значение альфа-канала каждого пиксела, рисуемого вами, будет умножаться на значение свойства
globalAlpha
. По умолчанию это свойство имеет значение 1 и не добавляет прозрачности. Если свойству
globalAlpha
присвоить значение 0, все нарисованное вами станет полностью прозрачным и на холсте ничего не будет видно. Если присвоить этому свойству значение 0.5, непрозрачные пикселы станут наполовину прозрачными. А пикселы, степень непрозрачности которых была равна 50%, станут непрозрачными на 25%. Изменение значения свойства
globalAlpha
оказывает влияние на степень непрозрачности всех пикселов, поэтому вам, вероятно, потребуется учесть, как эти пикселы объединяются (или «составляются») с пикселами, поверх которых они нарисованы - режимы объединения, поддерживаемые объектом Canvas, описываются в разделе 21.4.13.
Вместо сплошного цвета (пусть и полупрозрачного), заливку и рисование контуров можно также выполнять с использованием градиентов и повторяющихся изображений. На рис. 21.10 изображен прямоугольник, контур которого нарисован толстыми линиями с использованием шаблонного изображения поверх заливки линейным градиентом и под заливкой радиальным градиентом. Ниже описывается, как было реализовано рисование шаблонным изображением и заливка градиентами.
Чтобы выполнить заливку или рисование с применением шаблонного изображения вместо цвета, следует присвоить свойству
fillStyle
или
strokeStyle
объект
CanvasPattern
, возвращаемый методом
createPattern
объекта контекста:
var image = document.getElementById("myimage");
c.fillStyle = c.createPattern(image, "repeat");
Первый аргумент метода
createPattern
определяет изображение, которое будет использовано как шаблон. Это должен быть элемент документа
<img>, <canvas>
или
<video>
(или объект
Image
, созданный конструктором
Image
). Во втором аргументе обычно передается строка «repeat», если требуется повторять изображение при заполнении, независимо от его размера, но можно также использовать значения «repeat-х», «repeat-у» или «по-repeat».
Обратите внимание, что в качестве шаблонного изображения для одного элемента
<canvas>
можно использовать другой элемент
<canvas>
(даже если он не включен в состав документа и невидим на экране):
var offscreen = document.createElement("canvas"); // Невидимый холст
offscreen.width = offscreen.height = 10; // Установить его размеры
offscreen.getContext("2d").strokeRect(0,0,6,6); // Получить контекст
// и нарисовать прямоугольник
var pattern = с.createPattern(offscreen,"repeat");// И использовать как шаблон
Чтобы выполнить заливку (или нарисовать контур) градиентом, следует присвоить свойству
fillStyle
(или
strokeStyle
) объект
CanvasGradient
, возвращаемый методом
createLinearGradient
или
createRadialGradient
объекта контекста. Создание градиентов выполняется в несколько этапов, и в использовании они несколько сложнее, чем шаблонные изображения.
Первый этап - создание объекта
CanvasGradient
. В качестве аргументов методу
сгеateLinearGradient
передаются координаты двух точек, определяющих линию (она необязательно должна быть горизонтальной или вертикальной), вдоль которой будет изменяться цвет. Аргументы метода
createRadialGradient
определяют центры и радиусы двух окружностей. (Они необязательно должны быть концентрическими, но первая окружность обычно полностью располагается внутри второй.) Области внутри малой окружности и за пределами большой окружности будут заполняться сплошным цветом, а область между окружностями - градиентом.
После того как объект
CanvasGradient
создан и определены области холста для заливки, необходимо определить цвета градиента вызовом метода
addColorStop
объекта
CanvasGradient
. В первом аргументе этому методу передается число в диапазоне от 0.0 до 1.0. Во втором - цвет в формате, поддерживаемом CSS. Этот метод должен вызываться как минимум два раза, чтобы определить простой градиент, но его можно вызвать большее число раз. Цвет, соответствующий значению 0.0, будет использоваться в начале градиента, а цвет, соответствующий значению 1.0, - в конце. Если вы решите указать дополнительные цвета, они будут использоваться в промежуточных позициях градиента. В любой другой точке градиента значение цвета будет вычисляться методом интерполяции. Например: