HTML5 Canvas - przesuwanie kontekstu płótna

W niniejszym artykule pokażę, w jaki sposób można poddawać kontekst płótna, czyli to co narysowaliśmy, przesunięciu (translacji).

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

context.translate(dx,dy);

gdzie [dx,dy] to współrzędne wektora translacji.

Przykład - translacja

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+120,y-120);
context.lineTo(x+120,y+120);
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,"pink");
context.translate(-140,0);
ksztalt(context,150,150,"pink");

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

Narysowaliśmy tutaj trójkąt w punkcie (150,150), potem jednak przesunęliśmy kontekst płótna o wektor [-140,0] i znów narysowaliśmy ten sam trójkąt. Ponieważ jednak użyliśmy translacji płótna, drugi trójkąt znajduje się teraz w innym miejscu.





© medianauka.pl, 2018-07-12, ART-3570





Polecamy w naszym sklepie

Kolorowe skarpetki - football piłka nożna
Kolorowe skarpetki urodzinowe
Kolorowe skarpetki Miasto
Kolorowe skarpetki Kostka
Matematyka konkretna
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.