logo

HTML5 Canvas - skalowanie

W niniejszym artykule pokażę, w jaki sposób można poddawać kontekst płótna, czyli to co narysowaliśmy, transformacji skalowania.

Aby zastosować skalowanie należy użyć właściwości:

context.scale(sx,sy);

gdzie sx i sy oznaczają odpowiednio współczynnik skalowania w kierunku osi x i y. Zobaczmy to na przykładzie.

Przykład - skalowanie

Oto przykład rysowania własnego kształtu z użyciem przesunięcia:

<html>
<head>
<script> function ksztalt(context, x,y,fillStyle) {
context.beginPath();
context.moveTo(x,y);
context.lineTo(x+50,y-50);
context.lineTo(x+50,y+50);
context.closePath();
context.fillStyle=fillStyle;
context.fill();
context.strokeStyle="black"
context.lineWidth=2;
context.stroke();
}
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
ksztalt(context,150,150,"red");
context.scale(0.5,0.5);
ksztalt(context,150,150,"red");
context.translate(250,150);
context.scale(-0.5,-0.5);
ksztalt(context,150,150,"red");

};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>
Lupa

Odbicie lustrzane

Jeżeli zastosujemy skalę ujemną, dostajemy nowe przekształcenie w postaci odbicia lustrzanego. Powyższy przykład to ilustruje.

UWAGA! Zastosowanie skali wymaga często zastosowania translacji, szczególnie przy odbiciu lustrzanym, gdyż w takim przypadku zaczynamy rysować poza obszarem widzialnym płótna.




© medianauka.pl, 2018-07-13, ART-3572

 








Polecamy w naszym sklepie

30 sekund O sztucznej inteligencji i robotyce
Matematyka konkretna
Mapa świata Puzzle
Kolorowe skarpetki Miasto
Kolorowe skarpetki Kostka
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-2021 r.