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().

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

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

Зміна матриці впливає на подальше малювання на полотні 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);.

Приклад:

Ваш браузер не підтримує canvas. 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);