Przekrzywienie – sposób 2 (HTML5 canvas)

Przekrzywienie – sposób 2

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 przekrzywienie przy użyciu transform(1, hy, hx, 1, 0, 0).

Wynikiem jest pomnożenie macierzy jednostkowej przez macierz przekrzywienia, co w rezultacie daje przekrzywienie, czyli ten sam wynik co 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, 0, -0.5, 1, 0, 0);
	ctx.translate(220, 100);
	drawRectangle(ctx);