CanvasRenderingContext2D

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

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

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

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

js
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.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.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 Устарело CanvasRenderingContext2D.mozDash

An array which specifies the lengths of alternating dashes and gaps. Use CanvasRenderingContext2D.getLineDash() and CanvasRenderingContext2D.setLineDash() (en-US) instead.

Non-standard Устарело CanvasRenderingContext2D.mozDashOffset

Specifies where to start a dash array on a line. Use CanvasRenderingContext2D.lineDashOffset instead.

Non-standard Устарело CanvasRenderingContext2D.mozTextStyle

Introduced in in Gecko 1.9, deprecated in favor of the CanvasRenderingContext2D.font property.

Non-standard 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 CanvasRenderingContext2D.mozMeasureText()

This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use CanvasRenderingContext2D.measureText() instead.

Non-standard CanvasRenderingContext2D.mozPathText()

This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

Non-standard 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

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