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