Тип QML Context2D

Предоставляет 2D контекст для фигур на элементе Canvas Подробнее...

• Список всех членов, включая унаследованные члены

Свойства

• canvas : QtQuick::Canvas
• fillRule : перечисление
• fillStyle : значение
• font : строка
• globalAlpha : вещественное
• globalCompositeOperation : строка
• lineCap : строка
• lineJoin : строка
• lineWidth : вещественное
• miterLimit : вещественное
• shadowBlur : вещественное
• shadowColor : строка
• shadowOffsetX : qreal
• shadowOffsetY : qreal
• strokeStyle : значение
• textAlign : строка
• textBaseline : строка

Методы

• объект arc(вещественное x, вещественное y, вещественное radius, вещественное startAngle, вещественное endAngle, логическое anticlockwise)
• объект arcTo(вещественное x1, вещественное y1, вещественное x2, вещественное y2, вещественное radius)
• объект beginPath()
• объект bezierCurveTo(вещественное cp1x, вещественное cp1y, вещественное cp2x, вещественное cp2y, вещественное x, вещественное y)
• объект clearRect(вещественное x, вещественное y, вещественное w, вещественное h)
• объект clip()
• объект closePath()
• объект createConicalGradient(вещественное x, вещественное y, вещественное angle)
• CanvasImageData createImageData(Url imageUrl)
• CanvasImageData createImageData(CanvasImageData imageData)
• CanvasImageData createImageData(вещественное sw, вещественное sh)
• объект createLinearGradient(вещественное x0, вещественное y0, вещественное x1, вещественное y1)
• значение createPattern(Изображение image, строка repetition)
• значение createPattern(цвет color, перечисление patternMode)
• объект createRadialGradient(вещественное x0, вещественное y0, вещественное r0, вещественное x1, вещественное y1, вещественное r1)
• drawImage(значение image, вещественное sx, вещественное sy, вещественное sw, вещественное sh, вещественное dx, вещественное dy, вещественное dw, вещественное dh)
• drawImage(значение image, вещественное dx, вещественное dy, вещественное dw, вещественное dh)
• drawImage(значение image, вещественное dx, вещественное dy)
• объект ellipse(вещественное x, вещественное y, вещественное w, вещественное h)
• объект fill()
• объект fillRect(вещественное x, вещественное y, вещественное w, вещественное h)
• объект fillText(text, x, y)
• CanvasImageData getImageData(вещественное sx, вещественное sy, вещественное sw, вещественное sh)
• объект isPointInPath(вещественное x, вещественное y)
• объект lineTo(вещественное x, вещественное y)
• объект measureText(text)
• объект moveTo(вещественное x, вещественное y)
• объект putImageData(CanvasImageData imageData, вещественное dx, вещественное dy, вещественное dirtyX, вещественное dirtyY, вещественное dirtyWidth, вещественное dirtyHeight)
• объект quadraticCurveTo(вещественное cpx, вещественное cpy, вещественное x, вещественное y)
• объект rect(вещественное x, вещественное y, вещественное w, вещественное h)
• объект reset()
• объект resetTransform()
• объект restore()
• объект rotate(вещественное angle)
• объект roundedRect(вещественное x, вещественное y, вещественное w, вещественное h, вещественное xRadius, вещественное yRadius)
• объект save()
• объект scale(вещественное x, вещественное y)
• объект setTransform(вещественное a, вещественное b, вещественное c, вещественное d, вещественное e, вещественное f)
• объект shear(вещественное sh, вещественное sv)
• объект stroke()
• объект strokeRect(вещественное x, вещественное y, вещественное w, вещественное h)
• объект strokeText(text, x, y)
• объект text(строка text, вещественное x, вещественное y)
• объект transform(вещественное a, вещественное b, вещественное c, вещественное d, вещественное e, вещественное f)
• объект translate(вещественное x, вещественное y)

Подробное описание

Объект Context2D можно создать с помощью метода Canvas элемента getContext():

Canvas {
  id:canvas
  onPaint:{
     var ctx = canvas.getContext('2d');
     //...
  }
}

API Context2D реализует тот же стандарт W3C Canvas 2D Context API с некоторыми расширенными функциями.

API Context2D предоставляет контекст отрисовки, который определяет методы и атрибуты, необходимые для рисования на элементе Canvas. Следующее присваивает контекст отрисовки холста переменной context:

var context = mycanvas.getContext("2d")

API Context2D отрисовывает холст как систему координат, у которой начало (0,0) находится в верхнем левом углу, как показано на рисунке ниже. Координаты увеличиваются вдоль оси x слева направо и вдоль оси y сверху вниз по холсту.

Документация свойств

canvas : QtQuick::Canvas

Содержит элемент холста, на котором контекст выполняет отрисовку.

Это свойство является только для чтения.

fillRule : перечисление

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

• Qt.OddEvenFill
• Qt.WindingFill

Примечание: в отличие от QPainterPath, API Canvas использует правило заливки по обходу как правило заливки по умолчанию. Свойство fillRule является частью состояния контекста отрисовки.

См. такжеfillStyle.

fillStyle : значение

Содержит текущий стиль, используемый для заливки фигур. Стиль может быть строкой, содержащей цвет CSS, объектом CanvasGradient или CanvasPattern. Недействительные значения игнорируются. Это свойство принимает несколько синтаксисов цветов:

• 'rgb(красный, зелёный, синий)' - например: 'rgb(255, 100, 55)' или 'rgb(100%, 70%, 30%)'
• 'rgba(красный, зелёный, синий, альфа)' - например: 'rgb(255, 100, 55, 1.0)' или 'rgb(100%, 70%, 30%, 0.5)'
• 'hsl(оттенок, насыщенность, светлота)'
• 'hsla(оттенок, насыщенность, светлота, альфа)'
• '#RRGGBB' - например: '#00FFCC'
• Qt.rgba(красный, зелёный, синий, альфа) - например: Qt.rgba(0.3, 0.7, 1, 1.0)

Если fillStyle или strokeStyle присваивается многократно в цикле, следует использовать синтаксис Qt.rgba(), так как он обеспечивает наилучшую производительность, поскольку представляет собой уже готовое значение QColor и не требует разбора каждый раз.

Значение по умолчанию — '#000000'.

См. также createLinearGradient(), createRadialGradient(), createPattern() и strokeStyle.

font : строка

Содержит текущие настройки шрифта.

Поддерживается подмножество стандарта w3C 2d context для шрифтов:

• font-style (необязательно): normal | italic | oblique
• font-variant (необязательно): normal | small-caps
• font-weight (необязательно): normal | bold | 0 ... 99
• font-size: Npx | Npt (где N — положительное число)
• font-family: См. http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family

Примечание: Свойства font-size и font-family являются обязательными и должны быть указаны в приведенном выше порядке. Кроме того, имя семейства шрифтов с пробелами должно быть заключено в кавычки.

Значение шрифта по умолчанию — "10px sans-serif".

globalAlpha : вещественное число

Содержит текущее значение альфа-канала, применяемое к операциям отрисовки. Значение должно быть в диапазоне от 0.0 (полностью прозрачно) до 1.0 (полностью непрозрачно). Значение по умолчанию — 1.0.

globalCompositeOperation : строка

Содержит текущую операцию композиции из следующего списка:

• source-atop - A поверх B. Отображает исходное изображение там, где оба изображения непрозрачны. Отображает целевое изображение там, где целевое изображение непрозрачно, а исходное — прозрачно. В противном случае отображает прозрачность.
• source-in - A внутри B. Отображает исходное изображение там, где и исходное, и целевое изображение непрозрачны. В противном случае отображает прозрачность.
• source-out - A вне B. Отображает исходное изображение там, где исходное изображение непрозрачно, а целевое — прозрачно. В противном случае отображает прозрачность.
• source-over - (по умолчанию) A поверх B. Отображает исходное изображение там, где оно непрозрачно. В противном случае отображает целевое изображение.
• destination-atop - B поверх A. Аналогично source-atop, но с использованием целевого изображения вместо исходного и наоборот.
• destination-in - B внутри A. Аналогично source-in, но с использованием целевого изображения вместо исходного и наоборот.
• destination-out - B вне A. Аналогично source-out, но с использованием целевого изображения вместо исходного и наоборот.
• destination-over - B поверх A. Аналогично source-over, но с использованием целевого изображения вместо исходного и наоборот.
• lighter - A + B. Отображает сумму исходного и целевого изображения, при этом значения цветов стремятся к 255 (100%) как к пределу.
• copy - A (B игнорируется). Отображает исходное изображение вместо целевого.
• xor - A xor B. Исключающее ИЛИ исходного и целевого изображений.

Кроме того, это свойство также принимает режимы композиции, перечисленные в QPainter::CompositionMode. Согласно стандарту W3C, эти расширенные режимы композиции предоставляются с синтаксисом «vendorName-operationName», например: QPainter::CompositionMode_Exclusion предоставляется как «qt-exclusion».

lineCap : строка

Содержит текущий стиль окончания линии. Возможные стили окончания линии:

• butt - конец каждой линии имеет плоскую грань, перпендикулярную направлению линии, это значение по умолчанию.
• round - к концу линии добавляется полуокружность с диаметром, равным ширине линии.
• square - к концу линии добавляется прямоугольник с длиной, равной ширине линии, и шириной, равной половине ширины линии, размещённый плоской стороной, перпендикулярной направлению линии.

Другие значения игнорируются.

lineJoin : строка

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

Возможные стили соединения линий:

• bevel - отображается только то, что находится в местах соединения.
• round - в местах соединения должна быть отрисована заполненная дуга, соединяющая две указанные вершины соединения, примыкающая (и не перекрывающаяся) к указанному треугольнику, с диаметром, равным ширине линии, и началом в точке соединения.
• miter - в месте соединения (если возможно, учитывая длину срезки) должен быть нарисован второй заполненный треугольник, это стиль соединения линий по умолчанию.

Другие значения игнорируются.

lineWidth : вещественное число

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

miterLimit : вещественное число

Содержит текущий коэффициент ограничения срезки. Значение по умолчанию для ограничения срезки — 10,0.

shadowBlur : вещественное число

Содержит текущий уровень размытия теней.

shadowColor : строка

Содержит текущий цвет тени.

shadowOffsetX : qreal

Содержит текущий сдвиг тени по горизонтали в положительном направлении.

См. также shadowOffsetY.

shadowOffsetY : qreal

Содержит текущий сдвиг тени по вертикали в положительном направлении.

См. также shadowOffsetX.

strokeStyle : variant

Содержит текущий цвет или стиль, используемый для линий вокруг фигур. Стиль может быть либо строкой, содержащей цвет CSS, либо объектом CanvasGradient или CanvasPattern. Неверные значения игнорируются.

Значение по умолчанию — '#000000'.

См. также createLinearGradient(), createRadialGradient(), createPattern() и fillStyle.

textAlign : строка

Содержит текущие настройки выравнивания текста. Возможные значения:

• start
• end
• left
• right
• center

Другие значения игнорируются. Значение по умолчанию — "start".

textBaseline : строка

Содержит текущие настройки выравнивания базовой линии. Возможные значения:

• top
• hanging
• middle
• alphabetic
• ideographic
• bottom

Другие значения игнорируются. Значение по умолчанию — "alphabetic".

Методы

объект arc(вещественное число x, вещественное число y, вещественное число radius, вещественное число startAngle, вещественное число endAngle, логическое значение anticlockwise)

Добавляет дугу к текущему подпути, которая лежит на окружности круга с центром в точке (x, y) и радиусом radius.

И startAngle и endAngle измеряются от оси x в радианах.

Параметр anticlockwise равен true для каждой дуги на рисунке выше, так как все они нарисованы против часовой стрелки.

См. также arcTo и стандарт W3C для дуги arc().

объект arcTo(вещественное число x1, вещественное число y1, вещественное число x2, вещественное число y2, вещественное число radius)

Добавляет дугу с заданными контрольными точками и радиусом к текущему подпути, соединённому с предыдущей точкой прямой линией. Для рисования дуги необходимо выполнить те же шаги, что и для создания линии:

• Вызовите метод beginPath(), чтобы установить новый путь.
• Вызовите метод moveTo(x, y) для определения начальной позиции на холсте в точке (x, y).
• Для рисования дуги или окружности вызовите метод arcTo(x1, y1, x2, y2, radius). Это добавит дугу с начальной точкой (x1, y1), конечной точкой (x2, y2) и радиусом radius к текущему подпути и соединит его с предыдущим подпутем прямой линией.

См. также arc и стандарт W3C для arcTo().

объект beginPath()

Сбрасывает текущий путь на новый путь.

объект bezierCurveTo(вещественный cp1x, вещественный cp1y, вещественный cp2x, вещественный cp2y, вещественный x, вещественный y)

Добавляет кубическую кривую Безье между текущей позицией и заданной конечной точкой, используя контрольные точки, указанные по координатам (cp1x, cp1y) и (cp2x, cp2y). После добавления кривой текущая позиция обновляется до конечной точки (x, y) кривой. Следующий код генерирует путь, показанный ниже:

ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(20, 0);//start point
ctx.bezierCurveTo(-10, 90, 210, 90, 180, 0);
ctx.stroke();

См. также Стандарт W3C 2d контекста для bezierCurveTo и Демонстрацию красивого цветка с использованием bezierCurveTo.

объект clearRect(вещественный x, вещественный y, вещественный w, вещественный h)

Очищает все пиксели на холсте в заданном прямоугольнике до прозрачного черного.

объект clip()

Создаёт область обрезки из текущего пути. Любые части формы, находящиеся за пределами пути обрезки, не отображаются. Чтобы создать сложную форму, используя метод clip(), следует:

1. Вызвать метод context.beginPath() для установки пути обрезки.
2. Определить путь обрезки, вызвав любую комбинацию методов lineTo, arcTo, arc, moveTo, и т.д., а также метод closePath.
3. Вызвать метод context.clip().

Новая форма отобразится. Ниже показано, как путь обрезки может изменять отображение изображения:

См. также beginPath(), closePath(), stroke(), fill() и Стандарт W3C 2d контекста для clip.

объект closePath()

Закрывает текущую подцепную линию, нарисовав линию к началу подцепи, автоматически начав новый путь. Текущая точка нового пути — первая точка предыдущей подцепи.

См. также Стандарт W3C 2d контекста для closePath.

объект createConicalGradient(вещественный x, вещественный y, вещественный angle)

Возвращает объект CanvasGradient, представляющий конический градиент, который интерполирует цвета против часовой стрелки вокруг центральной точки (x, y) с начальным углом angle в радианах.

См. также CanvasGradient::addColorStop(), createLinearGradient(), createRadialGradient(), createPattern(), fillStyle и strokeStyle.

CanvasImageData createImageData(Url imageUrl)

Создаёт объект CanvasImageData с заданным изображением, загруженным из imageUrl.

Примечание: imageUrl должен быть загружен до вызова этой функции, иначе будет возвращён пустой объект CanvasImageData.

См. также Canvas::loadImage(), QtQuick::Canvas::unloadImage() и QtQuick::Canvas::isImageLoaded.

CanvasImageData createImageData(CanvasImageData imageData)

Создаёт объект CanvasImageData с теми же размерами, что и у аргумента.

CanvasImageData createImageData(вещественный sw, вещественный sh)

Создаёт объект CanvasImageData с заданными размерами (sw, sh).

объект createLinearGradient(вещественный x0, вещественный y0, вещественный x1, вещественный y1)

Возвращает объект CanvasGradient, представляющий линейный градиент, который плавно переходит от цвета вдоль линии между начальной точкой (x0, y0) и конечной точкой (x1, y1).

Градиент представляет собой плавный переход между цветами. Существуют два типа градиентов: линейные и радиальные. Градиенты должны иметь две или более цветовых остановки, представляющие смещения цвета, расположенные от 0 до 1 между начальной и конечной точкой или окружностью градиента.

См. также CanvasGradient::addColorStop(), createRadialGradient(), createConicalGradient(), createPattern(), fillStyle и strokeStyle.

variant createPattern(Image image, строка repetition)

Возвращает объект CanvasPattern, использующий данное изображение и повторяющийся в направлении(ях), заданном аргументом repetition.

Параметр image должен быть допустимым элементом Image, допустимым объектом CanvasImageData или загруженным URL-адресом изображения. Если данных изображения нет, выбрасывается исключение INVALID_STATE_ERR.

Допустимые значения для repetition:

• "repeat" — в обоих направлениях
• "repeat-x" — только по горизонтали
• "repeat-y" — только по вертикали
• "no-repeat" — ни в одном

Если аргумент repetition пуст или равен null, используется значение "repeat".

См. также strokeStyle и fillStyle.

variant createPattern(цвет color, перечисление patternMode)

Это перегруженная функция. Возвращает объект CanvasPattern, использующий заданный color и patternMode. Допустимые режимы узора:

• Qt.SolidPattern
• Qt.Dense1Pattern
• Qt.Dense2Pattern
• Qt.Dense3Pattern
• Qt.Dense4Pattern
• Qt.Dense5Pattern
• Qt.Dense6Pattern
• Qt.Dense7Pattern
• Qt.HorPattern
• Qt.VerPattern
• Qt.CrossPattern
• Qt.BDiagPattern
• Qt.FDiagPattern
• Qt.DiagCrossPattern

См. также Qt::BrushStyle.

объект createRadialGradient(вещественный x0, вещественный y0, вещественный r0, вещественный x1, вещественный y1, вещественный r1)

Возвращает объект CanvasGradient, представляющий радиальный градиент, который рисует по конусу, заданному начальным кругом с центром (x0, y0) и радиусом r0, и конечным кругом с центром (x1, y1) и радиусом r1.

См. также CanvasGradient::addColorStop(), createLinearGradient(), createConicalGradient(), createPattern(), fillStyle и strokeStyle.

drawImage(variant image, вещественный sx, вещественный sy, вещественный sw, вещественный sh, вещественный dx, вещественный dy, вещественный dw, вещественный dh)

Это перегруженная функция. Рисует заданный элемент как image из исходной точки (sx, sy) с шириной sw и высотой sh на холст в точке (dx, dy) и с шириной dw и высотой dh.

Примечание: тип image может быть элементом Image или Canvas, URL-адресом изображения или объектом CanvasImageData. При передаче в виде элемента Image, если изображение не полностью загружено, этот метод ничего не рисует. При передаче в виде строки URL-адреса изображение должно быть загружено, вызвав метод Canvas::loadImage() элемента Canvas предварительно. Изображение, которое рисуется, подчиняется текущему пути обрезки контекста, даже если заданный image является объектом CanvasImageData.

См. также CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded и стандарт W3C 2d контекста для drawImage.

drawImage(variant image, real dx, real dy, real dw, real dh)

Это перегруженный метод. Рисует заданный элемент как image на холсте в точке (dx, dy) с шириной dw и высотой dh.

Примечание: Тип image может быть элементом Image, URL изображения или объектом CanvasImageData. Если задан элемент Image, и изображение не полностью загружено, этот метод ничего не рисует. Если задан URL-строкой, изображение должно быть загружено предварительно, вызвав метод Canvas::loadImage() элемента холста. Рисование этого изображения подчиняется текущей обрезке контекста, даже если заданный image является объектом CanvasImageData.

См. также CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded и стандарт W3C 2d контекста для drawImage.

drawImage(variant image, real dx, real dy)

Рисует заданное изображение image на холсте в позиции (dx, dy). Примечание: тип image может быть элементом Image, URL изображения или объектом CanvasImageData. Если задан элемент Image, и изображение не полностью загружено, этот метод ничего не рисует. Если задан URL-строкой, изображение должно быть загружено предварительно, вызвав метод Canvas::loadImage() элемента холста. Рисование этого изображения подчиняется текущей обрезке контекста, даже если заданный image является объектом CanvasImageData.

См. также CanvasImageData, Image, Canvas::loadImage, Canvas::isImageLoaded, Canvas::imageLoaded и стандарт W3C 2d контекста для drawImage.

object ellipse(real x, real y, real w, real h)

Создаёт эллипс внутри прямоугольника, определяемого его верхним левым углом в (x, y), шириной w и высотой h, и добавляет его в путь в качестве замкнутого подпути.

Эллипс состоит из кривой по часовой стрелке, начинающейся и заканчивающейся в нуле градусов (положении 3 часа).

object fill()

Заполняет подпути текущей заливкой.

См. также стандарт W3C 2d контекста для fill и fillStyle.

object fillRect(real x, real y, real w, real h)

Окрашивает указанную прямоугольную область с использованием fillStyle.

См. также fillStyle.

object fillText(text, x, y)

Заливает заданный текст в заданной позиции.

См. также font, textAlign, textBaseline и strokeText.

CanvasImageData getImageData(real sx, real sy, real sw, real sh)

Возвращает объект CanvasImageData, содержащий данные изображения для заданного прямоугольника холста.

object isPointInPath(real x, real y)

Возвращает true, если заданная точка находится в текущем пути.

См. также стандарт W3C 2d контекста для isPointInPath.

object lineTo(real x, real y)

Рисует линию от текущей позиции до точки (x, y).

object measureText(text)

Возвращает объект со свойством width, значение которого эквивалентно вызову QFontMetrics::width() с заданным text в текущем шрифте.

object moveTo(real x, real y)

Создаёт новый подпуть с заданной точкой.

object putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)

Рисует данные из заданного объекта ImageData на холст. Если предоставлен прямоугольник изменений (dirtyX, dirtyY, dirtyWidth, dirtyHeight), рисуются только пиксели из этого прямоугольника.

object quadraticCurveTo(real cpx, real cpy, real x, real y)

Добавляет квадратичную кривую Безье между текущей точкой и конечной точкой (x, y) с контрольной точкой, заданной (cpx, cpy).

См. стандарт W3C 2d контекста для quadraticCurveTo

object rect(real x, real y, real w, real h)

Добавляет прямоугольник в позиции (x, y), с заданной шириной w и высотой h, как замкнутый подпуть.

object reset()

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

object resetTransform()

Сбрасывает матрицу преобразования до значения по умолчанию (эквивалентно вызову setTransform(1, 0, 0, 1, 0, 0)).

См. также transform(), setTransform() и reset().

object restore()

Выталкивает верхнее состояние из стека, восстанавливая контекст до этого состояния.

См. также save().

object rotate(real angle)

Поворачивает холст вокруг текущей точки начала координат на angle радиан по часовой стрелке.

ctx.rotate(Math.PI/2);

Матрица преобразования поворота:

где angle - угол поворота в радианах.

object roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)

Добавляет заданный прямоугольник rect с закруглёнными углами в путь. Аргументы xRadius и yRadius определяют радиус эллипсов, определяющих углы закруглённого прямоугольника.

object save()

Помещает текущее состояние в стек состояния.

Прежде чем изменить какие-либо атрибуты состояния, необходимо сохранить текущее состояние для дальнейшего использования. Контекст поддерживает стек состояний рисования. Каждое состояние состоит из текущей матрицы преобразования, области обрезки и значений следующих атрибутов:

• strokeStyle
• fillStyle
• fillRule
• globalAlpha
• lineWidth
• lineCap
• lineJoin
• miterLimit
• shadowOffsetX
• shadowOffsetY
• shadowBlur
• shadowColor
• globalCompositeOperation
• font
• textAlign
• textBaseline

Текущая траектория НЕ является частью состояния отрисовки. Траекторию можно сбросить, вызвав метод beginPath().

object scale(real x, real y)

Увеличивает или уменьшает размер каждого элемента в сетке холста, умножая коэффициенты масштаба на текущую матрицу преобразования. x — коэффициент масштаба по горизонтали, а y — коэффициент масштаба по вертикали.

Следующий код удваивает горизонтальный размер объекта, нарисованного на холсте, и уменьшает его вертикальный размер вдвое:

ctx.scale(2.0, 0.5);

object setTransform(real a, real b, real c, real d, real e, real f)

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

Прямое изменение матрицы преобразования позволяет выполнять масштабирование, вращение и трансляцию преобразований в одном шаге.

Каждая точка на холсте умножается на матрицу перед отрисовкой. Спецификация HTML Canvas 2D Context определяет матрицу преобразования как:

где:

• a — коэффициент масштаба по горизонтали (x)

  

• c — коэффициент наклона по x

  

• e — трансляция по x

  

• b — коэффициент наклона по y (вертикали)

  

• d — коэффициент масштаба по y

  

• f — трансляция по y

  

• последняя строка остается неизменной

Коэффициенты масштаба и наклона являются множителями; e и f — единицы координатного пространства, как и единицы в методе translate(x,y).

См. также transform().

object shear(real sh, real sv)

Наклоняет матрицу преобразования на sh по горизонтали и sv по вертикали.

object stroke()

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

См. стандарт W3C 2d context для обводки

См. также strokeStyle.

object strokeRect(real x, real y, real w, real h)

Отображает контур заданного прямоугольника, используя атрибуты strokeStyle, lineWidth, lineJoin и (при необходимости) miterLimit.

См. также strokeStyle, lineWidth, lineJoin и miterLimit.

object strokeText(text, x, y)

Отрисовывает контур заданного текста в указанной позиции.

См. также font, textAlign, textBaseline и fillText.

object text(string text, real x, real y)

Добавляет заданный text в траекторию в виде набора замкнутых подтраекторий, созданных на основе текущего шрифта контекста. Подтраектории размещаются так, что левый край базовой линии текста находится в точке, указанной (x, y).

object transform(real a, real b, real c, real d, real e, real f)

Этот метод очень похож на setTransform(), но вместо замены старой матрицы преобразования, этот метод применяет заданную матрицу преобразования к текущей матрице, умножая её на неё.

Метод setTransform(a, b, c, d, e, f) фактически сбрасывает текущее преобразование до единичной матрицы, а затем вызывает метод transform(a, b, c, d, e, f) с теми же аргументами.

См. также setTransform().

object translate(real x, real y)

Перемещает начало координат холста на расстояние x по горизонтали и y по вертикали в единицах координатного пространства.

Перевод начала координат позволяет рисовать разные объекты на холсте без ручного измерения координат для каждой фигуры.