Метод Canvas setTransform()
Определение и использование
каждый объект на холсте имеет текущий матричный преобразование.
setTransform() восстанавливает текущий матричный преобразование в единичную матрицу, затем выполняет setTransform() с теми же параметрами Метод transform().
Иными словами, setTransform() позволяет вам масштабировать, вращать, передвигать и наклонять текущую среду.
Комментарий:Это преобразование влияет только на рисование, начавшееся после вызова setTransform().
Пример
Нарисуйте прямоугольник, используя setTransform() для перезагрузки и создания нового матричного преобразования, нарисуйте прямоугольник снова, перезагрузите и создайте новый матричный преобразование, затем нарисуйте прямоугольник еще раз. Обратите внимание, что每当 вы вызывайте setTransform(), он перезагружает предыдущий матричный преобразование и создает новый, поэтому в следующем примере не будет виден красный прямоугольник, так как он находится под синим прямоугольником:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Синтаксис
context.setTransform(a,b,c,d,e,f);
Значения параметров
| Параметры | Описание |
|---|---|
| a | Горизонтальное вращение чертежа. |
| b | Горизонтальное наклонение чертежа. |
| c | Вертикальное наклонение чертежа. |
| d | Вертикальное масштабирование чертежа. |
| e | Горизонтальное движение рисования. |
| f | Вертикальное движение рисования. |
Поддержка браузерами
Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Комментарий:Интернет-Explorer 8 и более ранние версии не поддерживают элемент <canvas>.
