HTML DOM Объект Canvas
Объект Canvas
Тег HTML5 <canvas> используется для рисования графики "на лету" с помощью JavaScript.
Доступ к объекту Canvas
Вы можете получить доступ к элементу <canvas> с помощью getElementById():
Создать объект Canvas
Вы можете получить доступ к элементу <canvas> с помощью метода document.createElement():
Примечание: элемент <canvas> не имеет собственных возможностей рисования (это только контейнер для графики) - вы должны использовать сценарий для фактического рисования графики.
Метод getContext() возвращает объект, который предоставляет методы и свойства для рисования на холсте.
В этом справочнике будут рассмотрены свойства и методы объекта getContext ("2d"), который можно использовать для рисования текста на холсте: линий, прямоугольников, кругов и т.д..
Цвета, стили и тени
Свойство |
Описание |
fillStyle |
Устанавливает или возвращает цвет, градиент или узор, используемый для заливки рисунка |
strokeStyle |
Устанавливает или возвращает цвет, градиент или узор, используемый для обводки |
shadowColor |
Устанавливает или возвращает цвет, используемый для теней |
shadowBlur |
Устанавливает или возвращает уровень размытия для теней |
shadowOffsetX |
Устанавливает или возвращает горизонтальное расстояние тени от формы |
shadowOffsetY |
Устанавливает или возвращает вертикальное расстояние тени от формы |
Стили линий
Свойство |
Описание |
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() |
|
Стандартные свойства и события
Объект Canvas также поддерживает стандартные свойства и события.
Связанные страницы
HTML учебник: HTML5 Canvas
HTML справочник: HTML <canvas> тег