CanvasRenderingContext2D

Интерфейс CanvasRenderingContext2D предоставляет контекст 2D рендеринга для поверхности рисования элемента <canvas>.

Для того, чтобы получить объект этого интерфейса, следует вызвать метод getContext() объекта <canvas>, передав ему в качестве первого аргумента строку "2d":

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

После того, как получен контекст 2D рендеринга для элемента canvas, вы можете начать работу с ним. Например:

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);

Свойства и методы контекста 2D рендеринга представлены на боковой панели и далее по тексту. Кроме того, в руководстве по canvas содержится больше информации, примеров и ссылок на ресурсы по этой теме.

Рисование прямоугольников

Существует три метода, которые сразу же рисуют прямоугольники на холсте.

CanvasRenderingContext2D.clearRect()
Для всех пикселей, находящихся внутри прямоугольника, определённого начальной точкой (x, y) и размерами (ширина, высота), устанавливает чёрный прозрачный цвет, стирая любое ранее нарисованное содержимое.
CanvasRenderingContext2D.fillRect()
Рисует залитый прямоугольник в позиции (x, y), размеры которого определяются шириной width и высотой height.
CanvasRenderingContext2D.strokeRect()
Рисует на холсте прямоугольник с начальной точкой в позиции (x, y), имеющий ширину w и высоту h, используя текущий стиль обводки.

Рисование текста

Следующие методы позволяют создать текст. Смотрите также информацию об объекте TextMetrics (en-US), хранящем свойства текста.

CanvasRenderingContext2D.fillText()
Рисует (заливает) заданный текст в заданной позиции (x,y).
CanvasRenderingContext2D.strokeText()
Рисует обводку заданного текста в заданной позиции (x, y).
CanvasRenderingContext2D.measureText()
Возвращает объект TextMetrics (en-US).

Стили линий

Следующие методы и свойства определяют как будут отрисовываться линии.

CanvasRenderingContext2D.lineWidth
Ширина линий. По умолчанию 1.0
CanvasRenderingContext2D.lineCap
Форма концов линий. Возможные значения: butt (по умолчанию), round, square.
CanvasRenderingContext2D.lineJoin
Определяет форму вершин, в которых две линии сходятся. Возможные значения: round, bevel, miter (по умолчанию).
CanvasRenderingContext2D.miterLimit
Ограничение длины сопряжений. По умолчанию 10.
CanvasRenderingContext2D.getLineDash()
Возвращает текущий паттерн штриховой линии, который представляет собой массив, состоящий из чётного количества неотрицательных чисел.
CanvasRenderingContext2D.setLineDash() (en-US)
Устанавливает текущий паттерн штриховой линии.
CanvasRenderingContext2D.lineDashOffset
Указывает с какого места начать штриховку линии.

Стили текста

Следующие свойства контролируют отображение текста.

CanvasRenderingContext2D.font
Настройки шрифта. Значение по умолчанию: 10px sans-serif.
CanvasRenderingContext2D.textAlign
Определяет выравнивание текста по горизонтали. Возможные значения: start (по умолчанию), end, left, right или center.
CanvasRenderingContext2D.textBaseline
Определяет выравнивание текста относительно базовой линии. Возможные значения: top, hanging, middle, alphabetic (по умолчанию), ideographic, bottom.
CanvasRenderingContext2D.direction (en-US)
Направление текста. Возможные значения: ltr, rtl, inherit (по умолчанию).

Стили заливки и обводки

Стили заливки применяются к цветам и стилям внутри форм, а стили обводки применяются к линиям вокруг форм.

CanvasRenderingContext2D.fillStyle
Цвет или стиль применяемый внутри форм. По умолчанию #000 (чёрный).
CanvasRenderingContext2D.strokeStyle
Цвет или стиль , применяемый к линиям вокруг формы. По умолчанию #000 (чёрный).

Градиенты и шаблоны

CanvasRenderingContext2D.createLinearGradient()
Создаёт линейный градиент вдоль линии, задаваемой координатами, передаваемыми в параметры метода.
CanvasRenderingContext2D.createRadialGradient() (en-US)
Создаёт радиальный градиент, задаваемый координатами двух окружностей, передаваемыми в параметры метода.
CanvasRenderingContext2D.createPattern() (en-US)
Создаёт шаблон, используя указанное изображение (CanvasImageSource (en-US)). Он повторяет исходное изображение в направлениях, указанных во втором аргументе. Этот метод возвращает CanvasPattern.

Тени

CanvasRenderingContext2D.shadowBlur (en-US)
Устанавливает эффект размытия. По умолчанию 0
CanvasRenderingContext2D.shadowColor (en-US)
Цвет тени. По умолчанию полностью прозрачный чёрный.
CanvasRenderingContext2D.shadowOffsetX (en-US)
Горизонтальное смещение тени. По умолчанию 0.
CanvasRenderingContext2D.shadowOffsetY (en-US)
Вертикальное смещение тени. По умолчанию 0.

Контуры

Следующие методы могут быть использованы для манипулирования контурами объектов.

CanvasRenderingContext2D.beginPath()
Создаёт новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.
CanvasRenderingContext2D.closePath()
Перемещает точку рисования назад к началу текущего фрагмента контура. Этот метод пытается провести прямую линию от текущей точки до начальной. Если форма уже закрыта или имеет только одну точку, метод ничего не делает.
CanvasRenderingContext2D.moveTo()
Перемещает начальную точку нового фрагмента контура в точку с координатами (x, y).
CanvasRenderingContext2D.lineTo()
Соединяет последнюю точку фрагмента контура и точку с координатами (x,y) прямой линией .
CanvasRenderingContext2D.bezierCurveTo()
Добавляет кубическую кривую Безье к контуру. Для построения требуется три точки. Первые две точки являются контрольными, а третья - конечной. В качестве начальной точки выступает последняя точка текущего фрагмента контура, но она может быть изменена с помощью метода moveTo() перед созданием кривой Безье.
CanvasRenderingContext2D.quadraticCurveTo() (en-US)
Добавляет квадратичную кривую Безье к текущему контуру.
CanvasRenderingContext2D.arc()
Добавляет к контуру дугу, с центром в точке (x, y), радиусом r, имеющую угол начала startAngle и конца endAngle, рисующуюся в направлении, заданном в аргументе anticlockwise (по умолчанию - по часовой стрелке).
CanvasRenderingContext2D.arcTo()
Добавляет к контуру дугу, заданную контрольными точками и радиусом, соединяющуюся с предыдущей точкой прямой линией.
CanvasRenderingContext2D.ellipse() Экспериментальная возможность
Добавляет к контуру эллипс, с центром в точке (x, y), заданный радиусами radiusX и radiusY, имеющий угол начала startAngle и конца endAngle, рисующийся в направлении, заданном в аргументе anticlockwise (по умолчанию - по часовой стрелке).
CanvasRenderingContext2D.rect()
Создаёт контур прямоугольника с началом в точке (x, y), и размерами, заданными шириной width и высотой height.

Рисование контуров

CanvasRenderingContext2D.fill()
Заливает фрагменты контура текущей заливкой.
CanvasRenderingContext2D.stroke()
Выполняет обводку фрагментов контура текущей обводкой.
CanvasRenderingContext2D.drawFocusIfNeeded() (en-US)
Если заданный элемент находится в фокусе, этот метод рисует рамку фокуса вокруг текущего контура.
CanvasRenderingContext2D.scrollPathIntoView() (en-US)
Прокручивает текущий или заданный контур в видимую область окна браузера.
CanvasRenderingContext2D.clip() (en-US)
Создаёт область отсечения из текущих фрагментов контура. Все что рисуется после вызова метода clip() применяется только внутри области отсечения. Пример использования см. в разделе Области отсечения руководства по Canvas.
CanvasRenderingContext2D.isPointInPath() (en-US)
Позволяет узнать, содержится ли указанная точка в текущем контуре.
CanvasRenderingContext2D.isPointInStroke() (en-US)
Позволяет узнать, находится ли указанная точка на обводке контура.

Трансформации

Объекты в контексте рендеринга CanvasRenderingContext2D имеют текущую матрицу преобразований и методы для управления ей. Матрица преобразований применяется в момент создания текущего контура по умолчанию, рисования текста, форм и объектов Path2D (en-US). Методы, перечисленные ниже, остаются по историческим причинам и из соображений совместимости, в то время как в настоящее время в большинстве разделов API используются объекты SVGMatrix (en-US), которые будут использоваться в будущем как замена устаревшим методам.

CanvasRenderingContext2D.currentTransform
Текущая матрица преобразований (SVGMatrix (en-US) object).
CanvasRenderingContext2D.rotate()
Добавляет вращение в матрицу преобразований. Аргумент представляет угол вращения по часовой стрелке, выраженный в радианах.
CanvasRenderingContext2D.scale() (en-US)
Добавляет к элементам холста трансформацию масштабирования в x раз по горизонтали и y раз по вертикали.
CanvasRenderingContext2D.translate() (en-US)
Добавляет трансформацию перемещения, перемещая начальную точку системы координат холста на x по горизонтали и y по вертикали.
CanvasRenderingContext2D.transform() (en-US)
Управляет текущей матрицей преобразований при помощи матрицы, описанной аргументами, переданными в метод.
CanvasRenderingContext2D.setTransform() (en-US)
Переустанавливает текущую матрицу преобразований в единичную матрицу, после чего вызывает метод transform() с теми же аргументами.
CanvasRenderingContext2D.resetTransform() (en-US) Экспериментальная возможность
Переустанавливает текущую матрицу преобразований в единичную матрицу.

Композиция

CanvasRenderingContext2D.globalAlpha
Значение альфа-канала, применяемое к формам и изображениям, прежде чем они накладываются на холст. Значение по умолчанию 1.0 (полностью непрозрачный).
CanvasRenderingContext2D.globalCompositeOperation (en-US)
Совместно с применённым globalAlpha это свойство определяет как формы и изображения накладываются на существующее изображение.

Рисование изображений

CanvasRenderingContext2D.drawImage()
Рисует заданное изображение. У этого метода есть несколько различных форматов вызова, что обеспечивает большую гибкость в его использовании.

Манипулирование пикселями

Смотрите также объект ImageData.

CanvasRenderingContext2D.createImageData() (en-US)
Создаёт новый пустой объект ImageData с заданными размерами. Цвет всех пикселов в новом объекте устанавливается в прозрачный чёрный.
CanvasRenderingContext2D.getImageData()
Возвращает объект ImageData, представляющий данные о пикселах, расположенных под областью холста, ограниченной прямоугольником длиной sw и высотой sh, начальная точка которого находится в позиции (sx, sy).
CanvasRenderingContext2D.putImageData()
Переносит данные, заданные в объекте ImageData, на холст. Если в аргументах задана уточняющая прямоугольная область, отрисованы будут только пикселы из этой области.

Сглаживание изображений

CanvasRenderingContext2D.imageSmoothingEnabled (en-US) Экспериментальная возможность
Режим сглаживания изображений; если отключён, изображения не будут сглаживаться при масштабировании.

Состояние холста

Контекст рендеринга CanvasRenderingContext2D содержит множество состояний стилей рисования (атрибуты для стилей линий, стили теней, стили текста). Следующие методы помогут вам работать с этими состояниями:

CanvasRenderingContext2D.save()
Сохраняет текущее состояние стилей рисования, используя для этого стек, так что вы можете отменить любые внесённые в него изменения с помощью метода restore().
CanvasRenderingContext2D.restore()
Восстанавливает состояние стилей рисования в значение, сохранённое методом save() в стек состояний последним.
CanvasRenderingContext2D.canvas
Доступная только для чтения обратная ссылка на HTMLCanvasElement. Может иметь значение null, если она не связана с элементом <canvas>.

Области попадания

CanvasRenderingContext2D.addHitRegion() Экспериментальная возможность
Добавляет область попадания к холсту.
CanvasRenderingContext2D.removeHitRegion() Экспериментальная возможность
Удаляет область попадания с указанным id с холста.
CanvasRenderingContext2D.clearHitRegions() Экспериментальная возможность
Удаляет все области попадания с холста.

Нестандартные API

Большинство из этих API являются запрещёнными и будут удалены в будущем.

Non-standard CanvasRenderingContext2D.clearShadow()
Удаляет все настройки теней, такие как CanvasRenderingContext2D.shadowColor (en-US) и CanvasRenderingContext2D.shadowBlur (en-US).
Non-standard CanvasRenderingContext2D.drawImageFromRect()
This is redundant with an equivalent overload of drawImage.
Non-standard CanvasRenderingContext2D.setAlpha()
Вместо этого метода следует использовать CanvasRenderingContext2D.globalAlpha.
Non-standard CanvasRenderingContext2D.setCompositeOperation()
Вместо этого метода следует использовать CanvasRenderingContext2D.globalCompositeOperation (en-US).
Non-standard CanvasRenderingContext2D.setLineWidth()
Вместо этого метода следует использовать CanvasRenderingContext2D.lineWidth.
Non-standard CanvasRenderingContext2D.setLineJoin()
Вместо этого метода следует использовать CanvasRenderingContext2D.lineJoin.
Non-standard CanvasRenderingContext2D.setLineCap()
Вместо этого метода следует использовать CanvasRenderingContext2D.lineCap.
Non-standard CanvasRenderingContext2D.setMiterLimit()
Вместо этого метода следует использовать CanvasRenderingContext2D.miterLimit.
Non-standard CanvasRenderingContext2D.setStrokeColor()
Вместо этого метода следует использовать CanvasRenderingContext2D.strokeStyle.
Non-standard CanvasRenderingContext2D.setFillColor()
Вместо этого метода следует использовать CanvasRenderingContext2D.fillStyle.
Non-standard CanvasRenderingContext2D.setShadow()
Вместо этого метода следует использовать CanvasRenderingContext2D.shadowColor (en-US) и CanvasRenderingContext2D.shadowBlur (en-US).
Non-standard CanvasRenderingContext2D.webkitLineDash
Вместо этого свойства следует использовать CanvasRenderingContext2D.getLineDash() и CanvasRenderingContext2D.setLineDash() (en-US).
Non-standard CanvasRenderingContext2D.webkitLineDashOffset
Вместо этого свойства следует использовать CanvasRenderingContext2D.lineDashOffset.
Non-standard CanvasRenderingContext2D.webkitImageSmoothingEnabled
Вместо этого свойства следует использовать CanvasRenderingContext2D.imageSmoothingEnabled (en-US).
Non-standard CanvasRenderingContext2D.getContextAttributes()
По аналогии с аналогичным методом класса WebGLRenderingContext, возвращает объект Canvas2DContextAttributes, который содержит атрибуты "storage", показывающие какое хранилище используется (по умолчанию "persistent") и атрибут "alpha" (true по умолчанию), показывающий используется ли прозрачность на холсте.
Non-standard CanvasRenderingContext2D.isContextLost()
По аналогии с аналогичным методом класса WebGLRenderingContext, возвращает true если контекст canvas был потерян, иначе false.

Только WebKit

Non-standard CanvasRenderingContext2D.webkitBackingStorePixelRatio
Размер хранилища по отношению к элементу canvas. Смотри High DPI Canvas.
Non-standard CanvasRenderingContext2D.webkitGetImageDataHD
Предназначался для HD хранилищ, но удалён из спецификации canvas.
Non-standard CanvasRenderingContext2D.webkitPutImageDataHD
Предназначался для HD хранилищ, но удалён из спецификации canvas.

Только Gecko

Non-standard CanvasRenderingContext2D.filter (en-US)
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.

Prefixed APIs

Non-standard CanvasRenderingContext2D.mozCurrentTransform
Sets or gets the current transformation matrix, see CanvasRenderingContext2D.currentTransform.
Non-standard CanvasRenderingContext2D.mozCurrentTransformInverse
Sets or gets the current inversed transformation matrix.
Non-standard CanvasRenderingContext2D.mozFillRule
The fill rule to use. This must be one of evenodd or nonzero (default).
Non-standard CanvasRenderingContext2D.mozImageSmoothingEnabled
See CanvasRenderingContext2D.imageSmoothingEnabled (en-US).
Non-standard Deprecated CanvasRenderingContext2D.mozDash
An array which specifies the lengths of alternating dashes and gaps . Use CanvasRenderingContext2D.getLineDash() and CanvasRenderingContext2D.setLineDash() (en-US) instead.
Non-standard Deprecated CanvasRenderingContext2D.mozDashOffset
Specifies where to start a dash array on a line. . Use CanvasRenderingContext2D.lineDashOffset instead.
Non-standard Deprecated CanvasRenderingContext2D.mozTextStyle
Introduced in in Gecko 1.9, deprecated in favor of the CanvasRenderingContext2D.font property.
Non-standard Этот API вышел из употребления и его работа больше не гарантируется. CanvasRenderingContext2D.mozDrawText()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use CanvasRenderingContext2D.strokeText() or CanvasRenderingContext2D.fillText() instead.
Non-standard Этот API вышел из употребления и его работа больше не гарантируется. CanvasRenderingContext2D.mozMeasureText()
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use CanvasRenderingContext2D.measureText() instead.
Non-standard Этот API вышел из употребления и его работа больше не гарантируется. CanvasRenderingContext2D.mozPathText()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
Non-standard Этот API вышел из употребления и его работа больше не гарантируется. CanvasRenderingContext2D.mozTextAlongPath()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

Internal APIs (chrome-context only)

Non-standard CanvasRenderingContext2D.asyncDrawXULElement()
Renders a region of a XUL element into the canvas.
Non-standard CanvasRenderingContext2D.drawWindow() (en-US)
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
Non-standard CanvasRenderingContext2D.demote()
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.

Internet Explorer

Non-standard CanvasRenderingContext2D.msFillRule
The fill rule to use. This must be one of evenodd or nonzero (default).

Спецификации

Specification
HTML Standard
# 2dcontext

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также