HTML5 Canvas - stos przekształceń

W niniejszym artykule pokażę, w jaki sposób zapisywać stany przekształceń na stosie przekształceń i w jaki sposób odtwarzać te stany.

Aby zapisać stan przekształceń na stosie należy użyć metody:

context.save();

Aby odtworzyć stan przekształceń ze stosu należy użyć metody:

context.restore();

Przykład - wiele przekształceń

Oto przykład rysowania z wykorzystaniem stosu:

<html>
<head>
<script>
function ksztalt(context, x,y,fillStyle) {
		context.fillStyle=fillStyle;
		context.fillRect(x,y,x+20,y+20);
}
	window.onload = function(){
		var canvas = document.getElementById("myCanvas4");
		var context = canvas.getContext("2d");
		context.save(); //stan 1
		context.translate(120,100);
		context.save(); //stan 2
		context.rotate(Math.PI/3);
		context.save(); //stan 3
		context.scale(3,3);
		ksztalt(context,10,10,"red"); 
		context.restore(); // rysunek według stosu 3
		ksztalt(context,10,10,"blue"); 
		context.restore(); // rysunek według stosu 2
		ksztalt(context,10,10,"green"); 
		context.restore(); // rysunek według stosu 1
		ksztalt(context,10,10,"yellow");
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>

W powyższym przykładzie najpierw definiujemy przekształcenia, zapisując je kolejno 3 razy na stosie. Rysujemy kwadrat zgodnie ze stanem przekształceń na stosie (czerwony) i potem kolejno wywołując metodę restore, korzystamy z przekształceń zdefiniowanych wcześniej.

Uwaga! Metody save i restore mogą być używane do separowania przekształceń, tak jak to pokazano w artykule HTML5 Canvas - przeźroczystość.