Obrót – sposób 3 (HTML5 canvas)

Obrót – 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 obrót przy użyciu transform(cosα,-sinα, sinα, cosα,0,0).

Wynikiem jest pomnożenie macierzy jednostkowej przez macierz obrotu, co w rezultacie daje obrót, czyli ten sam wynik co w sposobie 2.

Obracamy figurę o Math.PI/6=30° zgodnie z kierunkiem wskazówek zegara.

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 = 200;
	var topY = 50;
	var width = 50;
	var height = 25;
	var cornerRadius = 15;
	drawRectangle(ctx);
	var a = Math.PI / 6.0;
	var c = Math.cos(a);
	var s = Math.sin(a);
	ctx.setTransform(1,0,0,1,0,0);
	ctx.transform(c, s, -s, c, 0, 0);
	drawRectangle(ctx);