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

. Значение альфа-канала каждого пиксела, рисуемого вами, будет умножаться на значение свойства . По умолчанию это свойство имеет значение 1 и не добавляет прозрачности. Если свойству присвоить значение 0, все нарисованное вами станет полностью прозрачным и на холсте ничего не будет видно. Если присвоить этому свойству значение 0.5, непрозрачные пикселы станут наполовину прозрачными. А пикселы, степень непрозрачности которых была равна 50%, станут непрозрачными на 25%. Изменение значения свойства оказывает влияние на степень непрозрачности всех пикселов, поэтому вам, вероятно, потребуется учесть, как эти пикселы объединяются (или «составляются») с пикселами, поверх которых они нарисованы - режимы объединения, поддерживаемые объектом Canvas, описываются в разделе 21.4.13.

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

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

или объект , возвращаемый методом объекта контекста:

Первый аргумент метода

определяет изображение, которое будет использовано как шаблон. Это должен быть элемент документа или (или объект , созданный конструктором ). Во втором аргументе обычно передается строка «repeat», если требуется повторять изображение при заполнении, независимо от его размера, но можно также использовать значения «repeat-х», «repeat-у» или «по-repeat».

Обратите внимание, что в качестве шаблонного изображения для одного элемента

можно использовать другой элемент (даже если он не включен в состав документа и невидим на экране):

Чтобы выполнить заливку (или нарисовать контур) градиентом, следует присвоить свойству

(или ) объект , возвращаемый методом или объекта контекста. Создание градиентов выполняется в несколько этапов, и в использовании они несколько сложнее, чем шаблонные изображения.

Первый этап - создание объекта

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

После того как объект

создан и определены области холста для заливки, необходимо определить цвета градиента вызовом метода объекта . В первом аргументе этому методу передается число в диапазоне от 0.0 до 1.0. Во втором - цвет в формате, поддерживаемом CSS. Этот метод должен вызываться как минимум два раза, чтобы определить простой градиент, но его можно вызвать большее число раз. Цвет, соответствующий значению 0.0, будет использоваться в начале градиента, а цвет, соответствующий значению 1.0, - в конце. Если вы решите указать дополнительные цвета, они будут использоваться в промежуточных позициях градиента. В любой другой точке градиента значение цвета будет вычисляться методом интерполяции. Например: