CanvasRenderingContext2D: метод translate()

Метод CanvasRenderingContext2D.translate() API 2D-холста добавляет трансформацию смещения к текущей матрице.

translate(x, y)

Метод translate() добавляет трансформацию смещения к текущей матрице, перемещая холст и его начало на x единиц по горизонтали и на y единиц по вертикали на сетке.

x

Расстояние для перемещения по горизонтали. Положительные значения - вправо, отрицательные - влево.

y

Расстояние для перемещения по вертикали. Положительные значения - вниз, отрицательные - вверх.

None (undefined).

В этом примере квадрат перемещается из его начального положения с помощью метода translate(). Затем рисуется неподвижный квадрат той же величины для сравнения.

HTML

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

JavaScript

Метод translate() смещает контекст на 110 единиц по горизонтали и на 30 единиц по вертикали. Первый квадрат смещается на эти значения от его начального положения.

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

// Moved square
ctx.translate(110, 30);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 80, 80);

// Reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

// Unmoved square
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, 80, 80);

Результат

Перемещенный квадрат красный, а неподвижный - серый.

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