пример
Нарисуйте прямоугольник, сбросить и создать новую матрицу преобразования с 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);
Попробуй сам " Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| setTransform() | да | 9.0 | да | да | да |
Определение и использование
Каждый объект на холсте имеет текущую матрицу преобразования.
setTransform() метод сбрасывает текущее преобразование к единичной матрице, а затем запускает transform() с теми же аргументами.
Другими словами, setTransform() метод позволяет масштабировать, вращать, перемещать и искажать текущий контекст.
Примечание: Преобразование будет влиять только на рисунки , сделанные после того, как метод SetTransform называется.
| Синтаксис JavaScript: | context.setTransform( a,b,c,d,e,f ); |
|---|
Значения параметров
| параметр | Описание | Сыграй |
|---|---|---|
| a | Весы чертежи по горизонтали | Сыграй " |
| b | Перекосов чертежи по горизонтали | Сыграй " |
| c | Перекосов чертежи по вертикали | Сыграй " |
| d | Весы чертежи вертикально | Сыграй " |
| e | Перемещение чертежи по горизонтали | Сыграй " |
| f | Перемещение чертежи по вертикали | Сыграй " |