CanvasRenderingContext2D: метод setTransform()

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

setTransform(a, b, c, d, e, f)
setTransform(matrix)

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

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

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

a (m11)

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

b (m12)

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

c (m21)

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

d (m22)

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

e (m41)

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

f (m42)

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

В качестве альтернативы, можно передать один параметр, который является объектом, содержащим указанные выше значения в качестве свойств. Имена параметров — это ключи свойств, и если два синонимичных имени присутствуют (например, m11 и a), они должны иметь одинаковое числовое значение, иначе будет выброшено исключение TypeError. Использование объекта позволяет опустить некоторые параметры — a и d по умолчанию равны 1, а остальные — 0.

Если у точки изначально были координаты $(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.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Результат

В следующем примере есть два элемента <canvas>. Мы применяем преобразование к контексту первого элемента, используя первый тип setTransform(), и рисуем квадрат, затем получаем матрицу с помощью CanvasRenderingContext2D.getTransform().

Затем мы применяем полученную матрицу непосредственно к контексту второго холста, передав объект DOMMatrix напрямую в setTransform() (т. е. второй тип), и рисуем круг.

HTML

<!-- First canvas (ctx1) -->
<canvas width="240"></canvas>
<!-- Second canvas (ctx2) -->
<canvas width="240"></canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

const canvases = document.querySelectorAll("canvas");
const ctx1 = canvases[0].getContext("2d");
const ctx2 = canvases[1].getContext("2d");

ctx1.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx1.fillRect(25, 25, 50, 50);

let storedTransform = ctx1.getTransform();
console.log(storedTransform);

ctx2.setTransform(storedTransform);
ctx2.beginPath();
ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
ctx2.fill();

Результат

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