translate()

Метод translate() ретранслирует позицию (0,0) в новое место растрового холста.

Примечание: Если после метода translate() вызывается, например, такой метод как fillRect(), то его значение добавляется к значениям x- и y-координат.

Синтаксис

context.translate(x, y);

Параметры

x

Значение, добавляемое к горизонтальным (x) координатам

y

Значение, добавляемое к вертикальным (y) координатам

Спецификация

• HTML Living Standard

Пример

Нарисуем прямоугольных в позиции (10, 10), установим новую нулевую позицию по координатам (70, 70). Снова нарисуем тот же прямоугольник (обратите внимание, что теперь прямоугольник начинается в координатах (80, 80):

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
ctx.fillRect(10, 10, 100, 50)
ctx.translate(70, 70)
ctx.fillRect(10, 10, 100, 50)

Ссылки

• Метод translate() ^{MDN (рус.)}