CanvasRenderingContext2D.setTransform()

CanvasRenderingContext2D.setTransform() - скидає і змінює матрицю.

Синтаксис:

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

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

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

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

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

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

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

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

Опис:

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

setTransform() спочатку скидає поточне перетворення матриці, а потім викликає transform().

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

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

a	b	e
c	d	f
0	0	1

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

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

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);

Для "скиданя" матриці визайте setTransform(1, 0, 0, 1, 0, 0);.

Приклад:

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);