HTML Canvas Справочник
Описание
Canvas - переводится с англ. Холст.
HTML5 тег <canvas> используется для рисования графики на лету с помощью скриптов (обычно с помощью JavaScript).
Однако элемент <canvas> не имеет собственных возможностей для рисования (он является лишь контейнером для графики) - необходимо использовать скрипты, чтобы рисовать графику.
Метод getContext() возвращает объект, который предоставляет методы и свойства для рисования в canvas.
Эта справка будет охватывать свойства и методы объекта getContext('2d'), который можно использовать для рисования текста, линий, кубов, кругов и многого другого - в canvas.
Поддержка браузерами
Цифры в таблице определяют первую версию браузера, которая полностью поддерживает этот элемент.
| Element |
|
|
|
|
|
| <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 |
Устанавливает или возвращает максимальную длину митры (скоса) |
Прямоугольники
| Метод |
Описание |
| 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() |
|
