CanvasRenderingContext2D: метод resetTransform()

Метод CanvasRenderingContext2D.resetTransform() API Canvas 2D сбрасывает текущее преобразование на единичную матрицу.

В этом примере рисуется повернутый прямоугольник после изменения матрицы, а затем матрица сбрасывается с помощью метода resetTransform().

HTML

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

JavaScript

Метод rotate() вращает матрицу преобразования на 45°. Метод fillRect() рисует заполненный прямоугольник, скорректированный в соответствии с этой матрицей.

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

// Draw a rotated rectangle
ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(60, 0, 100, 30);

// Reset transformation matrix to the identity matrix
ctx.resetTransform();

Результат

После завершения рисования преобразованных фигур необходимо вызвать resetTransform() перед отрисовкой чего-либо еще. В этом примере первые две фигуры нарисованы с наклоном, а последние две – с единичным (обычным) преобразованием.

HTML

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

JavaScript

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

// Skewed rectangles
ctx.transform(1, 0, 1.7, 1, 0, 0);
ctx.fillStyle = "gray";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);

// Non-skewed rectangles
ctx.resetTransform();
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);

Результат

Наклоненные прямоугольники серые, а непрозрачные – красные.

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

ctx.setTransform(1, 0, 0, 1, 0, 0);

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