Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Интерфейс 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.currentTransform
Текущая матрица преобразований (SVGMatrix object).
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

Большинство из этих 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.
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.mozCurrentTransform
Sets or gets the current transformation matrix, see CanvasRenderingContext2D.currentTransform
CanvasRenderingContext2D.mozCurrentTransformInverse
Sets or gets the current inversed transformation matrix. 
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).

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

Cпецификация Статус Комментарии
HTML Living Standard
Определение 'CanvasRenderingContext2D' в этой спецификации.
Живой стандарт  

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

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1 1.5 (1.8) 9 9 2
Возможность Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ? ? ? ? ? ?

Примечания о совместимости

  • Начиная с Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), указание недопустимых значений для следующих методов и свойств молча игнорируется: translate(), transform(), rotate(), scale(), rect(), clearRect(), fillRect(), strokeRect(), lineTo(), moveTo(), quadraticCurveTo(), arc(), shadowOffsetX, shadowOffsetYshadowBlur.

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

Метки документа и участники

 Внесли вклад в эту страницу: antas, dphov, ows-nightwolf, teoli
 Обновлялась последний раз: antas,