Javascript метод transform()

У каждого объекта на растровом холсте есть текущая матрица трансформации.

Метод transform() заменяет текущую матрицу трансформации. Он комбинирует путем умножения текущую матрицу трансформации с матрицей, описываемой как:

a c e
b d f
0 0 1

Иными словами, метод transform() позволяет вам масштабировать, поворачивать, двигать и скручивать текущий контекст.

Примечание: Трансформация будет применена к графическому объекту после вызова метода transform().

Примечание: Метод transform() воздействует пропорционально на другие трансформации, сделанные методами rotate(), scale(), translate() или transform(). Например: Если вы уже задали для какой-то графической фигуры изменение масштаба в два раза, и еще методом transform() меняете масштаб фигуры в два раза, то в конечном итоге фигура изменит свой масштаб в четыре раза. См. метод setTransform(), который не воздействует на другие трансформации.

JavaScript синтаксис:context.transform(a, b, c, d, e, f);

Значения параметров

ПараметрОписание
aГоризонтальный масштаб
bГоризонтальное скручивание
cВертикальное скручивание
dВертикальный масштаб
eГоризонтальный сдвиг
fВертикальный сдвиг

Пример использования

Нарисуем прямоугольник, добавим новую матрицу трансформации при помощи метода transform(), снова нарисуем прямоугольник, добавим новую матрицу трансформации и опять нарисуем прямоугольник. Обратите внимание, что каждый раз когда вы вызываете метод transform(), он опирается на предыдущую матрицу трансформации:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);