Тип QML Context2D

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

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

Свойства

• canvas : QtQuick::Canvas
• fillRule : enumeration
• fillStyle : variant
• font : string
• globalAlpha : real
• globalCompositeOperation : string
• lineCap : string
• lineDashOffset : real
• lineJoin : string
• lineWidth : real
• miterLimit : real
• shadowBlur : real
• shadowColor : string
• shadowOffsetX : qreal
• shadowOffsetY : qreal
• strokeStyle : variant
• textAlign : string
• textBaseline : string

Методы

• object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)
• object arcTo(real x1, real y1, real x2, real y2, real radius)
• object beginPath()
• object bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)
• object clearRect(real x, real y, real w, real h)
• object clip()
• object closePath()
• object createConicalGradient(real x, real y, real angle)
• CanvasImageData createImageData(real sw, real sh)
• CanvasImageData createImageData(CanvasImageData imageData)
• CanvasImageData createImageData(Url imageUrl)
• object createLinearGradient(real x0, real y0, real x1, real y1)
• variant createPattern(color color, enumeration patternMode)
• variant createPattern(Image image, string repetition)
• object createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)
• drawImage(variant image, real dx, real dy)
• drawImage(variant image, real dx, real dy, real dw, real dh)
• drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)
• object ellipse(real x, real y, real w, real h)
• object fill()
• object fillRect(real x, real y, real w, real h)
• object fillText(text, x, y)
• CanvasImageData getImageData(real sx, real sy, real sw, real sh)
• array getLineDash()
• object isPointInPath(real x, real y)
• object lineTo(real x, real y)
• object measureText(text)
• object moveTo(real x, real y)
• object putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)
• object quadraticCurveTo(real cpx, real cpy, real x, real y)
• object rect(real x, real y, real w, real h)
• object reset()
• object resetTransform()
• object restore()
• object rotate(real angle)
• object roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)
• object save()
• object scale(real x, real y)
• setLineDash(array pattern)
• object setTransform(real a, real b, real c, real d, real e, real f)
• object shear(real sh, real sv)
• object stroke()
• object strokeRect(real x, real y, real w, real h)
• object strokeText(text, x, y)
• object text(string text, real x, real y)
• object transform(real a, real b, real c, real d, real e, real f)
• object translate(real x, real 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

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

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

fillRule : enumeration

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

• Qt.OddEvenFill
• Qt.WindingFill

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

См. также fillStyle.

fillStyle : variant

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

• 'rgb(red, green, blue)' - например: 'rgb(255, 100, 55)' или 'rgb(100%, 70%, 30%)'
• 'rgba(red, green, blue, alpha)' - например: 'rgb(255, 100, 55, 1.0)' или 'rgb(100%, 70%, 30%, 0.5)'
• 'hsl(hue, saturation, lightness)'
• 'hsla(hue, saturation, lightness, alpha)'
• '#RRGGBB' - например: '#00FFCC'
• Qt.rgba(red, green, blue, alpha) - например: 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 atop B. Отображает исходное изображение везде, где оба изображения непрозрачны. Отображает целевое изображение везде, где целевое изображение непрозрачно, но исходное изображение прозрачно. Отображает прозрачность в остальных местах.
• source-in - A in B. Отображает исходное изображение везде, где как исходное, так и целевое изображение непрозрачны. Отображает прозрачность в остальных местах.
• source-out - A out B. Отображает исходное изображение везде, где исходное изображение непрозрачно, а целевое изображение прозрачно. Отображает прозрачность в остальных местах.
• source-over - (по умолчанию) A over B. Отображает исходное изображение везде, где исходное изображение непрозрачно. Отображает целевое изображение в остальных местах.
• destination-atop - B atop A. То же, что и source-atop, но с использованием целевого изображения вместо исходного и наоборот.
• destination-in - B in A. То же, что и source-in, но с использованием целевого изображения вместо исходного и наоборот.
• destination-out - B out A. То же, что и source-out, но с использованием целевого изображения вместо исходного и наоборот.
• destination-over - B over A. То же, что и source-over, но с использованием целевого изображения вместо исходного и наоборот.
• lighter - A plus B. Отображает сумму исходного и целевого изображения, со значениями цвета, приближающимися к 255 (100%) в качестве предела.
• copy - A (B игнорируется). Отображает исходное изображение вместо целевого.
• xor - A xor B. Исключающее ИЛИ исходного и целевого изображения.

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

lineCap : string

Хранит текущий стиль заглушки линии. Возможные стили заглушки линии:

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

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

lineDashOffset : real

Хранит текущий сдвиг тире линии. Значение смещения тире линии по умолчанию — 0.

Это свойство было введено в QtQuick 2.11.

См. также getLineDash() и setLineDash().

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 и стандарт W3C 2D контекста для 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) и радиусом к текущему подпути и соединяет его с предыдущим подпутем прямой линией.

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

object beginPath()

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

object bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real 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();

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

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

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

object clip()

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

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

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

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

object closePath()

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

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

object createConicalGradient(real x, real y, real angle)

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

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

CanvasImageData createImageData(real sw, real sh)

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

CanvasImageData createImageData(CanvasImageData imageData)

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

CanvasImageData createImageData(Url imageUrl)

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

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

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

object createLinearGradient(real x0, real y0, real x1, real y1)

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

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

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

variant createPattern(color color, enumeration 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.

variant createPattern(Image image, string repetition)

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

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

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

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

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

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

object createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)

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

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

drawImage(variant image, real dx, real dy)

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

См. также CanvasImageData, Image, Canvas::loadImage, Canvas::isImageLoaded, Canvas::imageLoaded, и стандарт W3C 2d context для 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() элемента Canvas. Рисование этого изображения подчиняется текущему пути обрезки контекста, даже если заданный image является объектом CanvasImageData.

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

drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real 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 context для drawImage.

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

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

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

object fill()

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

См. также стандарт W3C 2d context для 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, содержащий данные изображения для заданного прямоугольника холста.

array getLineDash()

Возвращает массив qreals, представляющий шаблон штрихов линии.

Этот метод был введен в QtQuick 2.11.

См. также setLineDash() и lineDashOffset.

object isPointInPath(real x, real y)

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

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

setLineDash(array pattern)

Устанавливает шаблон тире в заданный шаблон.

pattern — список чисел, который задаёт расстояния для попеременного рисования линии и промежутка.

Если количество элементов в массиве нечётное, элементы массива копируются и конкатенируются. Например, [5, 15, 25] станет [5, 15, 25, 5, 15, 25].

var space = 4 ctx.setLineDash([1, space, 3, space, 9, space, 27, space, 9, space]) ... ctx.stroke();

Этот метод был введён в QtQuick 2.11.

См. также getLineDash() и lineDashOffset.

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

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