Тип QML Context2D

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

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

Свойства

• canvas : QtQuick::Canvas
• fillRule : перечисление
• fillStyle : значение
• font : строка
• globalAlpha : вещественное число
• globalCompositeOperation : строка
• lineCap : строка
• lineDashOffset : вещественное число
• 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(imageUrl)
• CanvasImageData createImageData(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)
• массив getLineDash()
• объект isPointInPath(x, вещественное число y)
• объект lineTo(x, вещественное число y)
• объект measureText(text)
• объект moveTo(x, вещественное число y)
• объект putImageData(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)
• setLineDash(pattern)
• объект 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 или стиль линии присваивается многократно в цикле, следует использовать синтаксис Qt.rgba(), так как он обеспечивает наилучшую производительность, поскольку это уже допустимое значение QColor, не требующее разбора каждый раз.

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

См. также createLinearGradient(), createRadialGradient(), createPattern() и стиль линии.

шрифт : строка

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

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

• 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, эти расширенные режимы композиции предоставляются в формате "имя_производителя-имя_операции", например: QPainter::CompositionMode_Exclusion предоставляется как "qt-exclusion".

lineCap : строка

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

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

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

lineDashOffset : вещественное

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

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

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

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, вещественное радиус, вещественное начальныйУгол, вещественное конечныйУгол, булево противЧасовойСтрелки)

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

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

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

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

объект arcTo(x1, вещественное y1, вещественное x2, вещественное y2, вещественное радиус)

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

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

См. также arc и стандарт W3C 2D Context для 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(imageUrl)

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

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

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

CanvasImageData createImageData(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, который использует заданное изображение и повторяет его в направлении(ях), указанных аргументом повторения.

Параметр 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, 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(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(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(x, real y, real w, real h)

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

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

object fill()

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

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

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

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

См. также fillStyle.

object fillText(text, x, y)

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

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

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

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

array getLineDash()

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

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

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

object isPointInPath(x, real y)

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

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

object lineTo(x, real y)

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

object measureText(text)

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

object moveTo(x, real y)

Создаёт новую подтраекторию с заданной точкой.

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

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

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

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

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

object rect(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(угол)

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

ctx.rotate(Math.PI/2);

Матрица преобразования вращения имеет следующий вид:

где угол вращения задан в радианах.

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

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

объект save()

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

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

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

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

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

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

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

ctx.scale(2.0, 0.5);

setLineDash(шаблон)

Устанавливает шаблон пунктирной линии.

шаблон — список чисел, задающий расстояния для чередующегося рисования линии и пробела.

Если число элементов в массиве нечетно, элементы массива копируются и конкатенируются. Например, [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.

объект 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 контекста для обводки

См. также strokeStyle.

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

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

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

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

Рисует обводку заданного текста в заданной позиции.

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

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