Ua
En
Es
De
Fr
HTML Canvas Справочник
Описание
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 Устанавливает или возвращает вертикальное смещение тени относительно фигуры
Стили линий
Свойство
Описание
lineCap Устанавливает или возвращает стиль окончания линии
lineJoin Устанавливает или возвращает тип соединения линий
lineWidth Устанавливает или возвращает текущую ширину линии
miterLimit Устанавливает или возвращает максимальную длину скоса (митры)
Прямоугольники
Контуры
Метод
Описание
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() Рисует изображение, холст или видео на canvas
Пиксельная манипуляция
Свойство
Описание
width Возвращает ширину объекта ImageData
height Возвращает высоту объекта ImageData
data Возвращает объект, содержащий пиксельные данные указанного ImageData
Метод
Описание
createImageData() Создаёт новый пустой объект ImageData
getImageData() Возвращает объект ImageData, содержащий копию пиксельных данных указанного прямоугольника canvas
putImageData() Возвращает данные изображения из объекта ImageData обратно на canvas
Композиция
Свойство
Описание
globalAlpha Устанавливает или возвращает текущее значение прозрачности (альфа‑канала)
globalCompositeOperation Устанавливает или возвращает способ наложения нового изображения на существующее
Прочее
Метод
Описание
save()
Сохраняет состояние текущего контекста
restore()
Восстанавливает ранее сохранённое состояние контекста и его атрибутов
createEvent()
getContext()
toDataURL()
Обновлено:
