HTML Canvas. Справочник

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

Описание

Canvas - переводится с англ. Холст.

HTML5 тег <canvas> используется для рисования графики на лету с помощью скриптов (обычно с помощью JavaScript).

Однако элемент <canvas> не имеет собственных возможностей для рисования (он является лишь контейнером для графики) - вы должны использовать скрипты, чтобы рисовать графику.

Метод getContext() возвращает объект, который предоставляет методы и свойства для рисования в canvas.

Эта ссылка будет охватывать свойства и методы объекта getContext("2d") который можно использовать для рисования текста, линий, кубов, кругов и многого другого - в canvas.

Поддержка браузерами

Цифры в таблице определяют первую версию браузера, которая полностью поддерживает этот элемент.

Элемент
<canvas> 4.0 9.0 2.0 3.1 9.0

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают <canvas> и его свойства и методы.

Примечание: Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

Цвета, стили и тени

Свойства Описание
fillStyle Устанаввливает или возвращает цвет, градиент или шаблон, используемый для заполнения рисунка
strokeStyle Устанавливает или возвращает цвет, градиент или шаблон для штрихов
shadowColor Устанавливает или возвращает цвет для использования при создании теней
shadowBlur Устанавливает или возвращает уровень размытия для теней
shadowOffsetX Устанавливает или возвращает горизонтальное расстояние тени от формы
shadowOffsetY Устанавливает или возвращает вертикальное расстояние тени от формы

Метод Описание
createLinearGradient() Создает линейный градиент (для использования на содержимом canvas)
createPattern() Повторяет указанный элемент в указанном направлении
createRadialGradient() Создает радиальный / круговой градиент (для использования на содержимом canvas)
addColorStop() Определяет цвета и позиции остановки в объекте градиента

Стили строк

Свойства Описание
lineCap Устанавливает или возвращает стиль заглавных букв для строки
lineJoin Устанавливает или возвращает тип созданного угла, когда встречаются две линии
lineWidth Устанавливает или возвращает текущую ширину строки
miterLimit Устанавливает или возвращает максимальную длину митры (скоса)

Прямоугольники

Метод Описание
rect() Создаёт прямоугольник
fillRect() Рисует "заполненный" прямоугольник
strokeRect() Рисует прямоугольник (без заливки)
clearRect() Очищает указанные пиксели в пределах данного прямоугольника

Контуры

Метод Описание
fill() Заполняет текущий рисунок (контур)
stroke() Фактически рисует определённый вами контур
beginPath() Начинается контур или сбрасывается текущий контур
moveTo() Перемещает контур к указанной точке на холсте, не создавая строки
closePath() Создаёт контур от текущей точки до начальной точки
lineTo() Добавляет новую точку и создаёт линию к этой точке с последней указаной точки на холсте
clip() Закрепляет область любой формы и размера с оригинального холста
quadraticCurveTo() Создаёт квадратичную кривую Безье
bezierCurveTo() Создаёт кубическую кривую Безье
arc() Создаёт дугу/кривую (используется для создания кругов или частей кругов)
arcTo() Создаёт дугу/кривую между двумя касаемыми
isPointInPath() Возвращает true (истина), если указанная точка находится в текущем контуре, иначе false (ложь)

Трансформации

Метод Описание
scale() Масштабирует текущий рисунок, делая большим или меньшим
rotate() Возвращает текущий рисунок
translate() Изменяет позицию (0,0) на холсте
transform() Заменяет текущую матрицу преобразования для чертежа (рисунка)
setTransform() Сбрасывает текущее преобразование на идентичную матрицу. Затем запускается transform()

Текст

Свойства Описание
font Устанавливает или возвращает текущие свойства шрифта для текстового содержания
textAlign Устанавливает или возвращает текущее выравнивание для текстового содержимого
textBaseline Устанавливает или возвращает текущую текстовую базовую линию, которая используется при рисовании текста
Метод Описание
fillText() Рисует "заполненный" текст (из заливкой) на холсте
strokeText() Рисует текст на холсте (без заливки)
measureText() Возвращает объект, который содержит ширину указанного текста

Рисование изображения

Метод Описание
drawImage() Рисует изображение, холст или видео на холсте

Пиксельная манипуляция

Свойства Описание
width Возвращает ширину объекта ImageData
height Возвращает высоту объекта ImageData
data Возвращает объект, который содержит данные изображения указанного объекта ImageData
Метод Описание
createImageData() Создаёт новый, пустой объект ImageData
getImageData() Возвращает объект ImageData, который копирует пиксельные даные для заданного прямоугольника на холсте
putImageData() Возвращает данные изображения (из указанного объекта ImageData) назад на холст

Композиция

Свойства Описание
globalAlpha Устанавливает или возвращает текущее значение альфа или прозрачности рисунка
globalCompositeOperation Устанавливает или возвращает способ рисования нового изображения на существующем изображении.

Прочее

Метод Описание
save() Сохраняет состояние текущего контекста
restore() Возвращает ранее сохранённое состояние контура и атрибуты
createEvent()  
getContext()  
toDataURL()