Метод Canvas translate()
Определение и использование
translate() методы для повторного отображения положения (0,0) на канвасе.
Примечание:Когда вы вызывайте методы, такие как fillRect() подобные методам, значения добавляются к x и y значения координат.
Пример
Нарисуйте прямоугольник в位置е (10,10), установите новое положение (0,0) в (70,70). Наново нарисуйте прямоугольник (обратите внимание, что теперь прямоугольник начинается с позиции (80,80)):
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);
Грамматика
context.translate(x,y);
Значение параметра
| Параметр | Описание |
|---|---|
| x | Значение, добавляемое к горизонтальной координате (x). |
| y | Значение, добавляемое к вертикальной координате (y). |
Поддержка браузерами
Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Примечание:Интернет-эксплорер 8 и более ранние версии не поддерживают элемент <canvas>.
