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

Тени

Объект

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

Композиция

Обычно при рисовании на холсте новые фигуры накладываются поверх ранее нарисованных, частично или полностью скрывая их, в зависимости от степени прозрачности новых фигур. Процесс объединения новых пикселов со старыми называется «композицией», и, указывая различные значения в свойстве

, можно управлять порядком объединения пикселов. Например, это свойство можно установить так, что новые фигуры будут рисоваться под существующими.

В следующей таблице перечислены допустимые значения свойства и их смысл. Под исходными в таблице подразумеваются пикселы, которые рисуются в настоящий момент, под целевыми - существующие пикселы. Под результирующими - пикселы, которые получаются в результате объединения исходных и целевых пикселов. В формулах символом S обозначается исходный (source) пиксел, символом D - целевой (destination) пиксел, символом R - результирующий (result) пиксел, символом a_s - альфа-компонент (уровень непрозрачности) исходного пиксела, и символом a_d - альфа-компонент целевого пиксела:

Сохранение значений графических параметров

Методы

и позволяют сохранять и восстанавливать параметры объекта . Метод помещает параметры на вершину стека, а метод снимает последние сохраненные параметры с вершины стека и делает их текущими.

Сохраняются все свойства объекта

(за исключением свойства , которое является константой). Матрица преобразования и область отсечки также сохраняются на стеке, но текущий контур и позиция пера не сохраняются.

Манипулирование пикселами

Метод

позволяет получить массив пикселов холста, а метод putlmageData() дает возможность устанавливать отдельные пикселы. Эти методы могут пригодиться, если потребуется реализовать обработку изображений на языке JavaScript.

Свойства

Элемент

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

Текущий цвет, шаблон или градиент, используемый для заполнения. Это свойство может принимать строковое значение либо объект

или . По умолчанию заливка выполняется сплошным черным цветом

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

. Значение по умолчанию: «10рх sans-serif». Если размер шрифта в строке указан в таких единицах, как «еm» или «ех», или используются ключевые слова, определяющие относительные значения, такие как «larger», «smaller», «bolder» или «lighter», они интерпретируются относительно вычисленного CSS-стиля шрифта элемента

Определяет дополнительный уровень прозрачности, который будет добавляться ко всему, что будет нарисовано на холсте. Значение альфа-компонента всех пикселов, рисуемых на холсте, будет умножаться на значение этого свойства. Диапазон значений от 0.0 (полностью прозрачный) до 1.0 (значение по умолчанию: не добавляет дополнительную прозрачность).

Определяет порядок смешения («композиции») цветов на холсте. Обычно это свойство бывает полезным только при работе с полупрозрачными цветами или когда изменяется значение свойства

. Значение по умолчанию: «source-over». Также часто используются значения «destination-over» и «сору». Перечень допустимых значений приводится в таблице выше. Обратите внимание, что на момент написания этих строк броузеры по-разному выполняли некоторые виды композиции: некоторые выполняли композицию локально, а некоторые - глобально. Подробности приводятся в разделе 21.4.13.

Определяет, как должны оканчиваться отображаемые линии. Устанавливать это свойство имеет смысл только при рисовании толстых линий. Допустимые значения перечислены в следующей таблице. Значение по умолчанию: «butt».

Когда контур включает вершины, где соединяются прямые линии и/или кривые, свойство

определяет, как должны рисоваться эти вершины. Действие этого свойства проявляется только при рисовании толстых линий.

Значение по умолчанию, «miter», указывает, что внешние края двух линий в точке сопряжения должны быть продолжены, пока они не пересекутся. Когда две линии сопрягаются под очень острым углом, область сопряжения может оказаться достаточно длинной. Ограничить максимальную длину такого варианта сопряжения можно с помощью свойства

. Когда длина сопряжения превышает этот предел, сопряжение просто усекается.

Значение «round» указывает, что внешние края линий, образующих вершину, должны сопрягаться закрашенной дугой, диаметр которой равен толщине линий. Значение «bevel» указывает, что внешние края линий, образующих вершину, должны сопрягаться закрашенным треугольником,

Определяет толщину линий для операций рисования. Значение по умолчанию - 1. Широкие линии центрируются по воображаемой линии контура на половину толщины в одну сторону и на половину толщины в другую,

Когда линии сопрягаются под очень острым углом и при этом свойство

установлено в значение «miter», область сопряжения может оказаться достаточно длинной. Слишком длинная область сопряжения может выглядеть достаточно некрасиво. Свойство позволяет определить максимальную длину сопряжения. Величина этого свойства выражает отношение длины области сопряжения к толщине линий. Значение по умолчанию - 10, оно означает, что область сопряжения по длине никогда не должна превышать толщину линий более чем в 5 раз. Когда длина сопряжения превышает этот предел, оно просто усекается,