JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

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

на обложку

Флэнаган Дэвид

Шрифт:

”rgba(0,0,0,0)", // Совершенно прозрачный черный

"transparent", // Синоним предыдущего цвета

"”hsl(60, 100%, 50%)", // Насыщенный желтый

"hsl(60, 75%, 50%)", // Менее насыщенный желтый

"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, - в конце. Если вы решите указать дополнительные цвета, они будут использоваться в промежуточных позициях градиента. В любой другой точке градиента значение цвета будет вычисляться методом интерполяции. Например: