HTML5 тег <canvas> используется для отображения графики на лету при помощи скриптов (обычно JavaScript).
Тем не менее, сам по себе элемент <canvas> не имеет инструментария для рисования. Это всего лишь контейнер для графики. Чтобы в действительности что-то нарисовать в элементе <canvas>, необходимо использовать соответствующий скрипт.
Метод getContext() возвращает объект, предоставляющий методы и свойства для рисования в элементе <canvas>.
В данном справочнике приводится информация о свойствах и методах объекта getContext("2d"), который может использоваться для вывода в элементе <canvas> текста, линий, прямоугольников, кругов и др.
Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают элемент <canvas> и его свойства и методы. Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.
|
Свойство |
Описание |
|
fillStyle |
Устанавливает/возвращает цвет, градиент или шаблон, используемый для заливки графического объекта |
|
shadowBlur |
Устанавливает/возвращает уровень размытости для теней |
|
shadowColor |
Устанавливает/возвращает цвет для теней |
|
shadowOffsetX |
Устанавливает/возвращает горизонтальное расстояние тени от фигуры |
|
shadowOffsetY |
Устанавливает/возвращает вертикальное расстояние тени от фигуры |
|
strokeStyle |
Устанавливает/возвращает цвет, градиент или шаблон, используемый для обводки фигуры |
|
Метод |
Описание |
|
addColorStop() |
Определяет цвета и позицию остановки в объекте градиента |
|
createLinearGradient() |
Создает линейный градиент (для использования с содержимым элемента <canvas>) |
|
createPattern() |
Размножает заданный элемент в заданном направлении |
|
createRadialGradient() |
Создает радиальный/круговой градиент (для использования на содержимом элемента <canvas>) |
|
Свойство |
Описание |
|
lineCap |
Устанавливает/возвращает стиль концов нарисованной линии |
|
lineJoin |
Устанавливает/возвращает тип угла, созданного пересечением двух линий |
|
lineWidth |
Устанавливает/возвращает ширину текущей линии |
|
miterLimit |
Устанавливает/возвращает максимальную длину среза |
|
Метод |
Описание |
|
clearRect() |
Очищает заданную область пикселей внутри данного прямоугольника |
|
fillRect() |
Рисует "залитый" прямоугольник |
|
rect() |
Создает прямоугольник |
|
strokeRect() |
Рисует прямоугольник (без заливки) |
|
Метод |
Описание |
|
arc() |
Создает дугу/кривую (используется для создания окружностей или их части) |
|
arcTo() |
Создает дугу/кривую между двумя касательными |
|
beginPath() |
Начинает контур или сбрасывает текущий контур |
|
bezierCurveTo() |
Создает кубическую кривую Безье |
|
clip() |
Обрезает область любой формы и размера, находящуюся вне указанного контура |
|
closePath() |
Замыкает контур соединяя последнюю точку с первой |
|
fill() |
Делает заливку текущей фигуры (контура) |
|
isPointInPath() |
Возвращает значение true, если заданная точка находится внутри текущего контура, в обратном случае возвращается значение false |
|
lineTo() |
Добавляет новую точку контура и создает линию к этой точке от последней заданной точки |
|
moveTo() |
Передвигает точку контура в заданные координаты не рисуя линию |
|
quadraticCurveTo() |
Создает квадратичную кривую Безье |
|
stroke() |
В действительности рисует определенный вами контур |
|
Метод |
Описание |
|
rotate() |
Поворачивает текущий графический объект |
|
scale() |
Изменяет масштаб текущего графического объекта |
|
setTransform() |
Сбрасывает текущую матрицу трансформации в начальное состояние, а затем вызывает метод transform() с теми же параметрами |
|
transform() |
Применяет заданную матрицу трансформации |
|
translate() |
Ретранслирует позицию (0,0) в новое место |
|
Свойство |
Описание |
|
font |
Устанавливает/возвращает свойства шрифта для текстового содержимого |
|
textAlign |
Устанавливает/возвращает выравнивание для текстового содержимого |
|
textBaseline |
Устанавливает/возвращает базовую линию, используемую при выводе текста |
|
Метод |
Описание |
|
drawImage() |
Рисует изображение, содержимое другого элемента <canvas> или видео |
|
Свойство |
Описание |
|
data |
Возвращает объект, содержащий данные изображения заданного объекта ImageData |
|
height |
Возвращает высоту объекта ImageData |
|
width |
Возвращает ширину объекта ImageData |
|
Метод |
Описание |
|
createImageData() |
Создает новый, пустой объект ImageData |
|
getImageData() |
Возвращает объект ImageData, который копирует пиксельные данные заданной прямоугольной области холста |
|
putImageData() |
Помещает данные изображения (из заданного объекта ImageData) обратно в элемент <canvas> |
|
Свойство |
Описание |
|
globalAlpha |
Устанавливает/возвращает текущее значение прозрачности или альфа-канала графического объекта |
|
globalCompositeOperation |
Устанавливает/возвращает то, как исходное (новое) изображение нарисовано на целевом (существующем) изображении |
| Метод |
Описание |
|---|
| save() |
Сохраняет состояние текущего контекста |
| restore() |
Возвращает ранее сохраненное состояние и атрибуты |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|