Obrót – Sposób 3

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);	
	

Metoda drawRectangle pochodzi ze skryptu transform.js.
Wszystkie skrypty są dostępne tutaj.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *