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

Содержит текущий цвет или стиль для линий вокруг фигур. Стиль может быть строкой, содержащей цвет 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 и Стандарт 2D-контекста 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 для 2D контекста 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 для 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 для clip.

объект closePath()

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

См. также стандарт W3C для 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 или загруженной ссылкой на изображение; если данных изображения нет, возникает исключение 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(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 контекста для 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 контекста для drawImage.

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 контекста для 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().

объект restore()

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

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

объект rotate(вещественный angle)

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

ctx.rotate(Math.PI/2);

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

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

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

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

объект save()

Добавляет текущее состояние в стек состояний.

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

• strokeStyle
• fillStyle
• fillRule
• globalAlpha
• lineWidth
• lineCap
• lineJoin
• miterLimit
• shadowOffsetX
• shadowOffsetY
• shadowBlur
• shadowColor
• globalCompositeOperation
• шрифт
• textAlign
• textBaseline

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

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

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

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

ctx.scale(2.0, 0.5);

объект setTransform(вещественный a, вещественный b, вещественный c, вещественный d, вещественный e, вещественный f)

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

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

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

где:

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

  

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

  

• e — смещение по x

  

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

  

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

  

• f — смещение по y

  

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

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

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

объект shear(вещественный sh, вещественный sv)

Изменяет матрицу преобразования с помощью сдвига по горизонтали на sh и по вертикали на sv.

объект stroke()

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

См. Стандарт W3C 2d context для stroke

См. также strokeStyle.

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

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

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

объект strokeText(текст, x, y)

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

См. также шрифт, textAlign, textBaseline и fillText.

объект text(строка текст, вещественный x, вещественный y)

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

объект transform(вещественный a, вещественный b, вещественный c, вещественный d, вещественный e, вещественный f)

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

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

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

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

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

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