CanvasRenderingContext2D: метод transform()

Метод CanvasRenderingContext2D.transform() API холста 2D умножает текущее преобразование на матрицу, описанную аргументами этого метода. Это позволяет масштабировать, вращать, перемещать (перемещать) и наклонять контекст.

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

Матрица преобразования описывается следующим образом: $\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]$.

a (m11)

Элемент в первой строке и первом столбце матрицы.

b (m12)

Элемент во второй строке и первом столбце матрицы.

c (m21)

Элемент в первой строке и втором столбце матрицы.

d (m22)

Элемент во второй строке и втором столбце матрицы.

e (m41)

Элемент в первой строке и третьем столбце матрицы.

f (m42)

Элемент во второй строке и третьем столбце матрицы.

Если у точки были первоначальные координаты $(x, y)$, то после преобразования она будет иметь координаты $(ax + cy + e, bx + dy + f)$. Это означает:

• e и f управляют горизонтальным и вертикальным перемещением контекста.
• Когда b и c равны 0, a и d управляют горизонтальным и вертикальным масштабированием контекста.
• Когда a и d равны 1, b и c управляют горизонтальным и вертикальным наклоном контекста.

None (undefined).

В этом примере прямоугольник наклоняется как вертикально (.2) так и горизонтально (.8). Масштабирование и перемещение остаются неизменными.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.transform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Результат

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• CanvasRenderingContext2D.setTransform()