Непрозрачный цвет в нотации CSS задается строкой в формате #RRGGBB, где RR, GG и BB - это шестнадцатиричные цифры, определяющие интенсивность красной (red), зеленой (green) и синей (blue) составляющих в диапазоне от 00 до FF. Например ярко-красный цвет описывается строкой «#FF0000». Чтобы определить степень прозрачности цвета, используется строка в формате «rgba(R, G, В, А)». В такой нотации R, G и В определяют интенсивность красной, зеленой и синей составляющих цвета в виде десятичных чисел в диапазоне от 0 до 255, а А - альфа-компонент (прозрачность), как число с плавающей точкой в диапазоне от 0.0 (полностью прозрачный цвет) до 1.0 (полностью непрозрачный цвет). Например, полупрозрачный ярко-красный цвет описывается строкой «rgba(255, 0, 0, 0.5)».
Толщина, окончания и сопряжение линий
Элемент
Canvas
имеет несколько свойств, с помощью которых можно определить различные варианты отображения линий. Толщину линий можно указать с помощью свойства
lineWidth
, окончания линий - с помощью свойства
liпеСар
, сопряжения линий - с помощью свойства
lineJoin
.
Рисование прямоугольников
Нарисовать и заполнить прямоугольник можно с помощью методов
strokeRect
и
fillRect
. Кроме того, методом
clearRect
можно очистить прямоугольную область.
Рисование изображений
В API объекта
Canvas
изображения определяются с помощью объектов
Image
, которые представляют HTML-теги
<img>
или невидимые изображения, созданные с помощью конструктора
Image
(дополнительную информацию см. в справочной статье Image). Кроме того, в качестве объекта-источника изображения могут использоваться элементы
<canvas>
и
<video>.
Добавить изображение в элемент
Canvas
можно с помощью метода
drawImage,
который в наиболее общем случае позволяет масштабировать и выводить на экран произвольный прямоугольный участок исходного изображения.
Рисование текста
Метод
fillText
рисует текст, а метод
strokeText
рисует контуры букв, составляющих текст. Используемый шрифт определяется свойством
font
; значение этого свойства должно быть строкой определения шрифта в формате CSS. Выравнивание текста относительно указанной координаты X по левому краю, по правому краю или по центру определяется с помощью свойства
textAlign
, а выравнивание относительно указанной координаты Y - с помощью свойства
textBaseline
.
Система координат и преобразования
По умолчанию начало системы координат холста находится в точке (0,0), в верхнем левом углу, когда координата X растет в направлении к правой границе, а координата Y - к нижней. Атрибуты
width
и
height
тега
<canvas>
определяют максимальные значения координат X и Y, а одна элементарная единица измерения в системе координат обычно соответствует одному пикселу.
Однако существует возможность преобразовать систему координат, вызывая смещение, масштабирование или вращение системы координат в операциях рисования. Делается это с помощью методов
translate, scale
и
rotate,
которые оказывают влияние на матрицу преобразования холста. Поскольку система координат может подвергаться подобным преобразованиям, значения координат, которые передаются методам, таким как
lineTo,
могут не соответствовать количеству пикселов. По этой причине для определения координат в API объекта
Canvas
используются не целые, а вещественные числа.
Тени
Объект
CanvasRenderingContext2D
может автоматически добавлять тени к любым создаваемым фигурам. Цвет тени задается с помощью свойства
shadowColor
, а ее смещение-с помощью свойств
shadowOffsetX
и
shadowOffsetY
. Кроме того, с помощью свойства
shadowBlur
можно определить степень размытия краев тени.
Композиция
Обычно при рисовании на холсте новые фигуры накладываются поверх ранее нарисованных, частично или полностью скрывая их, в зависимости от степени прозрачности новых фигур. Процесс объединения новых пикселов со старыми называется «композицией», и, указывая различные значения в свойстве
globalCompositeOperation
, можно управлять порядком объединения пикселов. Например, это свойство можно установить так, что новые фигуры будут рисоваться под существующими.
В следующей таблице перечислены допустимые значения свойства и их смысл. Под исходными в таблице подразумеваются пикселы, которые рисуются в настоящий момент, под целевыми - существующие пикселы. Под результирующими - пикселы, которые получаются в результате объединения исходных и целевых пикселов. В формулах символом S обозначается исходный (source) пиксел, символом D - целевой (destination) пиксел, символом R - результирующий (result) пиксел, символом as– альфа-компонент (уровень непрозрачности) исходного пиксела, и символом ad– альфа-компонент целевого пиксела:
Сохранение значений графических параметров
Методы
save
и
restore
позволяют сохранять и восстанавливать параметры объекта
CanvasRenderingContext2D
. Метод
save
помещает параметры на вершину стека, а метод
restore
снимает последние сохраненные параметры с вершины стека и делает их текущими.