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

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

globalAlpha

. Значение альфа-канала каждого пиксела, рисуемого вами, будет умножаться на значение свойства

globalAlpha

. По умолчанию это свойство имеет значение 1 и не добавляет прозрачности. Если свойству

globalAlpha

присвоить значение 0, все нарисованное вами станет полностью прозрачным и на холсте ничего не будет видно. Если присвоить этому свойству значение 0.5, непрозрачные пикселы станут наполовину прозрачными. А пикселы, степень непрозрачности которых была равна 50%, станут непрозрачными на 25%. Изменение значения свойства

globalAlpha

оказывает влияние на степень непрозрачности всех пикселов, поэтому вам, вероятно, потребуется учесть, как эти пикселы объединяются (или «составляются») с пикселами, поверх которых они нарисованы - режимы объединения, поддерживаемые объектом Canvas, описываются в разделе 21.4.13.

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

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

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

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); // Получить контекст

<b>                                                // и нарисовать прямоугольник </b>

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

<b>// Линейный градиент, по диагонали холста (предполагается, что преобразования отсутствуют)</b>

var bgfade = с.createLinearGradient(0,0,canvas.width,canvas.height);

bgfade.addColorStop(0.0, "#88f”); // От светло-синего вверху слева

bgfade.addColorStop(1.0, "#fff"); // До белого внизу справа

<b>// Градиент между двумя концентрическими окружностями. Прозрачный в середине</b>

// до полупрозрачного серого и опять до прозрачного,

var peekhole = с.createRadialGradient(300,300,100, 300,300,300);