CanvasRenderingContext2D.transform()

CanvasRenderingContext2D.transform() - змінює матрицю.

Синтаксис:

ctx.transform( a, b, c, d, e, f );

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

a - горизонтальне масштабування.

b - горизонтальний перекіс.

c - вертикальний перекіс.

d - вертикальне масштабування.

e - горизонтальне переміщення.

f - вертикальне переміщення.

Опис:

transform() метод об'єкту CanvasRenderingContext2D який змінює матрицю перетворення для малювання на полотні canvas.

Зміна матриці дозволяє масштабувати, обертати, переміщувати.

Матриця перетворення:

a	b	e
c	d	f
0	0	1

Зміна матриці впливає на подальше малювання на полотні canvas і не змінює те що було уже намальовано.

Метод transform() подібний до setTransform(), відміність полягає в тому що transform() додає (примножує) зміни до матриці, а setTransform() змінює.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="24pt aril";

ctx.transform(1, 0.16, 0, 1, 1, 1);
ctx.fillStyle="black";
ctx.fillText("transform", 10, 5);

ctx.transform(1, 0.16, 0, 1, 1, 1);
ctx.fillStyle="red";
ctx.fillText("transform", 10, 5);

ctx.transform(1, 0.16, 0, 1, 1, 1);
ctx.fillStyle="blue";
ctx.fillText("transform", 10, 5);

ctx.setTransform(1, 0.16, 0, 1, 1, 1);
ctx.fillStyle="black";
ctx.fillText("setTransform", 170, 5);

ctx.setTransform(1, 0.16, 0, 1, 1, 1);
ctx.fillStyle="red";
ctx.fillText("setTransform", 170, 5);

ctx.setTransform(1, 0.16, 0, 1, 1, 1);
ctx.fillStyle="blue";
ctx.fillText("setTransform", 170, 5);

Приклад:

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

ctx.transform(0.9, 0.4, 0, 1, 0, 1);
ctx.fillRect(5, 5, 70, 60);

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

ctx.transform(0.9, -0.1, -0.4, 1, 0, 1);
ctx.fillRect(5, 5, 70, 60);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.transform(0.30, 0.15, -0.15, 0.3, 0, 0);
ctx.fillRect(50, 5, 60, 15);