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() |
|