Translacja – sposób 3 (HTML5 canvas)

Translacja – Sposób 3

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

Aktualna macierz staje się macierzą zerową.

Ustawiamy translację przy użyciu transform(1, 0, 0, 1, dx, dy).

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

Użyty został Skrypt transform.js.

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,0,0,1,160,60);
	drawRectangle(ctx);