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>
Lupa

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ść.





© medianauka.pl, 2018-09-10, A-3595



Udostępnij
©® Media Nauka 2008-2023 r.