Тип 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 холста использует правило заполнения winding в качестве правила заполнения по умолчанию. Свойство 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 : string

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

Поддерживается подмножество стандарта 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 : real

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

globalCompositeOperation : string

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

• 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 исключающее ИЛИ B. Исключающее ИЛИ исходного и целевого изображений.

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

lineCap : string

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

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

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

lineJoin : string

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

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

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

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

lineWidth : real

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

miterLimit : real

Содержит текущее отношение предела скругления. Значение предела скругления по умолчанию равно 10,0.

shadowBlur : real

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

shadowColor : string

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

shadowOffsetX : qreal

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

См. также shadowOffsetY.

shadowOffsetY : qreal

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

См. также shadowOffsetX.

strokeStyle : variant

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

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

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

textAlign : string

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

• start
• end
• left
• right
• center

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

textBaseline : string

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

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

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

Документация по методам

object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)

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

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

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

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

object arcTo(real x1, real y1, real x2, real y2, real radius)

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

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

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

object 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 context для 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 context для clip.

объект closePath()

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

См. также стандарт W3C 2d context для 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.

вариант createPattern(Изображение image, строка repetition)

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

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

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

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

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

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

вариант 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(вариант image, вещественный sx, вещественный sy, вещественный sw, вещественный sh, вещественный dx, вещественный dy, вещественный dw, вещественный dh)

Это перегруженная функция. Рисует заданный элемент как image из исходной точки (sx, sy) и исходной ширины sw, исходной высоты sh на холст в точке (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, 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)

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

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

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

где:

• 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()

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

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

См. также 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 в единицах координатного пространства.

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