Skalowanie – sposób 3 (HTML5 canvas)

Skalowanie – Sposób 3

Użyty został Skrypt transform.js.

Zerujemy aktualną macierz przy użyciu setTransfrorm(1, 0, 0, 1, 0, 0).

Aktualna macierz staje się macierzą zerową.

Ustawiamy skalowanie przy użyciu transform(sx, 0, 0, sy, 0, 0).

Wynikiem jest pomnożenie macierzy jednostkowej przez macierz skalowania, co w rezultacie daje skalowanie, czyli ten sam wynik co w sposobie 2.

Żeby zobaczyć skalowaną figurę trzeba dokonać translacji.

Kolejność wykonania translacji i skalowania nie jest obojętna, a skutki zmiany kolejności są takie jak w sposobie 2.

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	var leftX = 10;
	var topY = 10;
	var width = 150;
	var height = 100;
	var cornerRadius = 15;
	drawRectangle(ctx);
	ctx.setTransform(1,0,0,1,0,0);
	ctx.transform(1.5, 0, 0, 1.5, 0, 0);
	ctx.translate(160, 60);
	drawRectangle(ctx);