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, A-3573



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