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, ART-3595





Polecamy w naszym sklepie

Kolorowe skarpetki - football piłka nożna
Kolorowe skarpetki Kostka
kolorowe skarpetki góra lodowa
Kolorowe skarpetki urodzinowe
Kolorowe skarpetki Miasto
Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© ® Media Nauka 2008-2022 r.