logo

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

30 sekund O sztucznej inteligencji i robotyce
laboratorium w szufladzie Modelarstwo i robotyka
Badania jako podstawa projektowania User Experience
Kolorowe skarpetki Miasto
Mapa świata Puzzle
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.