CanvasRenderingContext2D

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Интерфейс 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, хранящем свойства текста.

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

Стили линий

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

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

Стили текста

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

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

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

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

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

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

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

Тени

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

Контуры

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

CanvasRenderingContext2D.beginPath(): Создаёт новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.
CanvasRenderingContext2D.closePath(): Перемещает точку рисования назад к началу текущего фрагмента контура. Этот метод пытается провести прямую линию от текущей точки до начальной. Если форма уже закрыта или имеет только одну точку, метод ничего не делает.
CanvasRenderingContext2D.moveTo(): Перемещает начальную точку нового фрагмента контура в точку с координатами (x, y).
CanvasRenderingContext2D.lineTo(): Соединяет последнюю точку фрагмента контура и точку с координатами (x,y) прямой линией.
CanvasRenderingContext2D.bezierCurveTo(): Добавляет кубическую кривую Безье к контуру. Для построения требуется три точки. Первые две точки являются контрольными, а третья - конечной. В качестве начальной точки выступает последняя точка текущего фрагмента контура, но она может быть изменена с помощью метода moveTo() перед созданием кривой Безье.
CanvasRenderingContext2D.quadraticCurveTo(): Добавляет квадратичную кривую Безье к текущему контуру.
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(): Если заданный элемент находится в фокусе, этот метод рисует рамку фокуса вокруг текущего контура.
CanvasRenderingContext2D.scrollPathIntoView(): Прокручивает текущий или заданный контур в видимую область окна браузера.
CanvasRenderingContext2D.clip(): Создаёт область отсечения из текущих фрагментов контура. Все что рисуется после вызова метода clip() применяется только внутри области отсечения. Пример использования см. в разделе Области отсечения руководства по Canvas.
CanvasRenderingContext2D.isPointInPath(): Позволяет узнать, содержится ли указанная точка в текущем контуре.
CanvasRenderingContext2D.isPointInStroke(): Позволяет узнать, находится ли указанная точка на обводке контура.

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

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

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

Композиция

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Blink и WebKit

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

Не стандартно CanvasRenderingContext2D.clearShadow(): Удаляет все настройки теней, такие как CanvasRenderingContext2D.shadowColor и CanvasRenderingContext2D.shadowBlur.
Не стандартно CanvasRenderingContext2D.drawImageFromRect(): This is redundant with an equivalent overload of drawImage.
Не стандартно CanvasRenderingContext2D.setAlpha(): Вместо этого метода следует использовать CanvasRenderingContext2D.globalAlpha.
Не стандартно CanvasRenderingContext2D.setCompositeOperation(): Вместо этого метода следует использовать CanvasRenderingContext2D.globalCompositeOperation.
Не стандартно CanvasRenderingContext2D.setLineWidth(): Вместо этого метода следует использовать CanvasRenderingContext2D.lineWidth.
Не стандартно CanvasRenderingContext2D.setLineJoin(): Вместо этого метода следует использовать CanvasRenderingContext2D.lineJoin.
Не стандартно CanvasRenderingContext2D.setLineCap(): Вместо этого метода следует использовать CanvasRenderingContext2D.lineCap.
Не стандартно CanvasRenderingContext2D.setMiterLimit(): Вместо этого метода следует использовать CanvasRenderingContext2D.miterLimit.
Не стандартно CanvasRenderingContext2D.setStrokeColor(): Вместо этого метода следует использовать CanvasRenderingContext2D.strokeStyle.
Не стандартно CanvasRenderingContext2D.setFillColor(): Вместо этого метода следует использовать CanvasRenderingContext2D.fillStyle.
Не стандартно CanvasRenderingContext2D.setShadow(): Вместо этого метода следует использовать CanvasRenderingContext2D.shadowColor и CanvasRenderingContext2D.shadowBlur.
Не стандартно CanvasRenderingContext2D.webkitLineDash: Вместо этого свойства следует использовать CanvasRenderingContext2D.getLineDash() и CanvasRenderingContext2D.setLineDash().
Не стандартно CanvasRenderingContext2D.webkitLineDashOffset: Вместо этого свойства следует использовать CanvasRenderingContext2D.lineDashOffset.
Не стандартно CanvasRenderingContext2D.webkitImageSmoothingEnabled: Вместо этого свойства следует использовать CanvasRenderingContext2D.imageSmoothingEnabled.

Только Blink

Не стандартно CanvasRenderingContext2D.getContextAttributes(): По аналогии с аналогичным методом класса WebGLRenderingContext, возвращает объект Canvas2DContextAttributes, который содержит атрибуты "storage", показывающие какое хранилище используется (по умолчанию "persistent") и атрибут "alpha" (true по умолчанию), показывающий используется ли прозрачность на холсте.
Не стандартно CanvasRenderingContext2D.isContextLost(): По аналогии с аналогичным методом класса WebGLRenderingContext, возвращает true если контекст canvas был потерян, иначе false.

Только WebKit

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

Только Gecko

Не стандартно CanvasRenderingContext2D.filter: CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.

Prefixed APIs

Не стандартно CanvasRenderingContext2D.mozFillRule: The fill rule to use. This must be one of evenodd or nonzero (default).
Не стандартно CanvasRenderingContext2D.mozImageSmoothingEnabled: See CanvasRenderingContext2D.imageSmoothingEnabled.
Не стандартно Устарело CanvasRenderingContext2D.mozDash: An array which specifies the lengths of alternating dashes and gaps. Use CanvasRenderingContext2D.getLineDash() and CanvasRenderingContext2D.setLineDash() instead.
Не стандартно Устарело CanvasRenderingContext2D.mozDashOffset: Specifies where to start a dash array on a line. Use CanvasRenderingContext2D.lineDashOffset instead.
Не стандартно Устарело CanvasRenderingContext2D.mozTextStyle: Introduced in in Gecko 1.9, deprecated in favor of the CanvasRenderingContext2D.font property.
Не стандартно 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.
Не стандартно CanvasRenderingContext2D.mozMeasureText(): This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use CanvasRenderingContext2D.measureText() instead.
Не стандартно CanvasRenderingContext2D.mozPathText(): This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
Не стандартно CanvasRenderingContext2D.mozTextAlongPath(): This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

Internal APIs (chrome-context only)

Не стандартно CanvasRenderingContext2D.asyncDrawXULElement(): Renders a region of a XUL element into the canvas.
Не стандартно CanvasRenderingContext2D.drawWindow(): Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
Не стандартно 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

Не стандартно 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

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

HTMLCanvasElement