Za pomocą metody rotate można jedynie obrócić obiekt względem początku układu współrzędnych. Nie ma tutaj możliwości ustawienia punktu obrotu. Oto prosty przykład:
var canvas = document.getElementById("rotate");
var ctx = canvas.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(10,10,90,10);
ctx.save(); // metoda zapamiętująca bieżące ustawienia rysowania
ctx.rotate(30 * Math.PI / 180);
ctx.fillRect(10,10,90,10);
ctx.restore(); // metoda odzyskująca poprzednie ustawienia rysowania
Wynik działania powyższego kodu będzie następujący:
Obrócenie obiektu względem dowolnego punktu wymaga zaprzęgnięcia dodatkowo metody translate w następujący sposób:
Wynik działania powyższego kodu będzie następujący:
Skalowanie rysowanych elementów
Do skalowania rysowanych obiektów służy metoda scale, która przyjmuje dwa argumenty: wartość skalowania na osi x i wartość skalowania na osi y. Oto przykład:
var canvas = document.getElementById("scale");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillStyle="blue";
ctx.fillText("Some text", 10, 40);
ctx.save(); // metoda zapamiętująca bieżące ustawienia rysowania
ctx.scale(2, -1.); // skalowanie tekstu
ctx.strokeStyle="black";
ctx.strokeText("Some text", 10, -40);
ctx.restore();
Wynik działania powyższego skryptu:
Macierz transformacji liniowej i przesunięcia
Wcześniej omówione metody umożliwiają przesuwanie, skalowanie i obracanie, aczkolwiek wszystkie te elementy można zastąpić tworząc macierz transformacji i translacji (przesunięcia). Macierz ta w przypadku obiektów 2W ma następującą postać:
a1, a2, a3, a4 - elementy macierzy przekształcenia liniowego a zarazem kolejne argumenty metody ustawiającej macierz przekształcenia liniowego i przemieszczenia;
a5, a6 - elementy macierzy odpowiedzialne za przemieszczenie, które równocześnie są kolejnymi argumentami metody ustawiającej macierz przekształcenia liniowego i przemieszczenia.
Istnieją trzy metody związane z macierzą przekształcenia liniowego i przemieszczenia, pierwszą z nich jest metoda setTransform. Metoda ta przyjmuje wyżej opisane argumenty odpowiadające sześciu elementom macierzy przekształcenia i przesunięcia.
Kolejną metodą jest transform, która również przyjmuje te same argumenty z tą tylko różnicą, że mnoży ona macierz bieżącego przekształcenia i przemieszczenia z macierzą, której elementy składowe zostały podane na wejście tejże metody.
Ostatnia metoda resetTransform resetuje ustawienia macierzy transformacji do pierwotnego stanu.
Oto przykład zastosowania tych metod w praktyce:
var canvas = document.getElementById("transform");
var ctx = canvas.getContext("2d");
var angle = Math.PI / 180 * 30;
var cos = Math.cos(angle);
var sin = Math.sin(angle);
ctx.setTransform(cos, sin, - sin, cos, 50, 50);
for(i = 0; i < 12; i++){
ctx.fillStyle="rgb(" + parseInt(255 / 12 * i) + "," + parseInt(255 - 255 / 12 * i) + "," + parseInt(255 / 12 * i) + ")";
ctx.fillRect(0, 0, 50, 10);
ctx.transform(cos, sin, - sin, cos, 0, 0);
}
