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> тег
