canvas 2d

Obrót – Sposób 1

Używamy funkcji
rotate(α)
. α – oznacza kąt obrotu w radianach. Ta tranformacja jest złożeniem
aktualnej macierzy przekształceń i żądanego przez programistę obrotu.

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);
	ctx.rotate(Math.PI/6);
	drawRectangle(ctx);

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