Метод translate() на канвасе HTML
Определение и использование
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 |
Комментарий:Интернет-Explorer 8 и более ранние версии не поддерживают элемент <canvas>.
