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>