HTML5 Canvas - macierz przekształceń

W niniejszym artykule pokażę, w jaki sposób można samemu zdefiniować przekształcenie w oparciu o tak zwaną macierz przekształceń.

Aby zastosować własne przekształcenie, należy użyć właściwości:

context.transform(a,b,c,d,e,f);

gdzie a,b,c,d,e,f są składnikami macierzy przekształcenia:
\left[\begin{array} x'\\y'\\1 \end{array}\right] = \left[ \begin{array} a&c&e\\b&d&f\\0&0&1 \end{array}\right] \left[ \begin{array} x\\y\\1 \end{array}\right]

Ponadto (x',y') jest obrazem punktu (x,y) w naszym przekształceniu.

W API HTML5 jest jeszcze metoda context.setTransform(a,b,c,d,e,f), która umożliwia działanie na kontekście płótna w przypadku danej macierzy przekształcenia, resetuje bieżące ustawienia transformacji i uruchamia metodę transform.

Poniżej zastosowano macierz przekształcenia efektu pochylenia kształtu w skali sx i sy. Przekształcenie to reprezentuje macierz:

\left[ \begin{array} 1&s_x&0\\s_y&1&0\\0&0&1 \end{array}\right] \left[

Przykład - własne przekształcenie

Oto przykład rysowania prostokąta z użyciem własnego przekształcenia:

<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.transform(1,0,1.5,1,0,0);
context.fillStyle='red';
context.fillRect(10,10,100,100);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>
Lupa





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





Polecamy w naszym sklepie

Kolorowe skarpetki - football piłka nożna
Matematyka konkretna
kolorowe skarpetki góra lodowa
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-2022 r.