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