HTML DOM Canvasобъект
Объект Canvas
Объект Canvas является новым в HTML5.
Тег <canvas> HTML5 используется для рисования изображений (с помощью скриптов, обычно JavaScript).
Доступ к объекту Canvas
Вы можете использовать getElementById() для доступа к элементу <canvas>:
var x = document.getElementById("myCanvas");
Попробуйте
Создание объекта Canvas
Вы можете использовать метод document.createElement() для создания элемента <canvas>:
var x = document.createElement("CANVAS");
Попробуйте
Примечание:Сам элемент <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() |
Рисует изображение, canvas или видео на canvas. |
Пиксельные операции
| Свойства |
Описание |
| width |
Возвращает ширину объекта ImageData. |
| height |
Возвращает высоту объекта ImageData. |
| data |
Возвращает объект, содержащий данные изображения указанного объекта ImageData. |
| Методы |
Описание |
| createImageData() |
Создает новый пустой объект ImageData. |
| getImageData() |
Возвращает объект ImageData, который копирует данные пикселей из указанного прямоугольника на холсте. |
| putImageData() |
Помещает данные изображения (из указанного объекта ImageData) обратно на холст. |
Композиция
| Свойства |
Описание |
| globalAlpha |
Задает или возвращает текущее значение альфа-канала или прозрачности для рисования. |
| globalCompositeOperation |
Задает или возвращает, как новое изображение будет нарисовано поверх существующего изображения. |
Другое
| Методы |
Описание |
| save() |
Сохраняет состояние текущего контекста. |
| restore() |
Возвращает ранее сохраненные состояния и атрибуты пути. |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
Стандартные свойства и события
Объект Canvas также поддерживает стандартныеСвойстваиСобытия。
Связанные статьи
Учебник HTML:HTML-элемент <canvas>
Другие расширения