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

21.4.7. Цвет, прозрачность, градиенты и шаблоны

21.4.7. Цвет, прозрачность, градиенты и шаблоны

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

Чтобы определить сплошной цвет, можно использовать имена цветов, определяемые стандартом HTML4¹(

Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white и yellow.

), или использовать строки в формате CSS:

context.strokeStyle = "blue"; // Рисовать синие линии
context. fillStyle = "#aaa"; // Заливку выполнять серым цветом

По умолчанию свойства strokeStyle и fillStyle имеют значение «#000000», соответствующее непрозрачному черному цвету. Текущие броузеры поддерживают цвета CSS3 и позволяют использовать форматы RGB, RGBA, HSL и HSLA определения цветов вдобавок к базовому формату RGB. Например:

var colors = [
"#f44",                      // Шестнадцатеричное значение RGB: красный
"#44ff44",                   //  Шестнадцатеричное значение RRGGBB: зеленый
"rgb(60, 60, 255)",          // RGB в виде целых 0-255: синий
"rgb(100%, 25%, 100%)",      // RGB в виде процентов: пурпурный
"rgba(100%, 25%, 100%, 0.5)",// RGB плюс альфа 0-1: полупрозрачный пурпурный
”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, - в конце. Если вы решите указать дополнительные цвета, они будут использоваться в промежуточных позициях градиента. В любой другой точке градиента значение цвета будет вычисляться методом интерполяции. Например:

// Линейный градиент, по диагонали холста (предполагается, что преобразования отсутствуют)
var bgfade = с.createLinearGradient(0,0,canvas.width,canvas.height);
bgfade.addColorStop(0.0, "#88f”); // От светло-синего вверху слева
bgfade.addColorStop(1.0, "#fff"); // До белого внизу справа
// Градиент между двумя концентрическими окружностями. Прозрачный в середине
// до полупрозрачного серого и опять до прозрачного,
var peekhole = с.createRadialGradient(300,300,100, 300,300,300);
peekhole.addColorStop(0.0, "transparent"); // Прозрачный
peekhole.addColorStop(0.7, "rgba(100,100,100,.9)"); // Полупрозрачный серый
peekhole.addColorStop(1.0, "rgba(0,0,0,0)"); // Опять прозрачный

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

Рисунок, изображенный на рис. 21.10, был создан с использованием шаблона pattern и градиентов bgfade и peekhole с помощью следующего программного кода:

c.fillStyle = bgfade; // Сначала использовать линейный градиент
с.fillRect(0,0,600,600); // Залить весь холст
с.strokeStyle = pattern; // Использовать шаблон для рисования линий
c.lineWidth = 100; // Очень толстые линии
с.strokeRect(100,100,400,400); // Нарисовать большой квадрат
c.fillStyle = peekhole; // Использовать радиальный градиент
с.fillRect(0,0,600,600); // Покрыть холст этой полупрозрачной заливкой

Оглавление книги