Przykład
Narysuj prostokąt, dodać nową macierz transformacji z transform() , ponownie narysować prostokąt, dodać nową macierz transformacji, a następnie ponownie narysować prostokąt. Zauważ, że za każdym razem dzwonić transform() , buduje na poprzedniej macierzy transformacji:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100); Spróbuj sam " Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, który w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| transform() | tak | 9,0 | tak | tak | tak |
Definicja i Wykorzystanie
Każdy obiekt na płótnie posiada aktualną macierz transformacji.
transform() metoda zastępuje bieżącą macierz transformacji. Mnoży się bieżącą macierz transformacji matrycy opisanej przez:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
Innymi słowy, transform() metoda pozwala na skalowanie, obracanie, przesuwanie i pochylanie aktualny kontekst.
Uwaga: Transformacja dotyczyć będą jedynie rysunki wykonane po transform() wywoływana jest metoda.
Uwaga: transform() metoda zachowuje się w stosunku do innych przekształceń dokonanych przez rotate(), scale(), translate() lub transform() .Przykład: Jeśli masz już zestaw rysunku do skali przez dwa, a transform() metoda skaluje swoje rysunki przez dwa, rysunki będą teraz skalę przez cztery.
Porada: Sprawdź setTransform() metodę, która nie zachowuje się w stosunku do innych przemian.
| Składnia JavaScript: | context.transform( a,b,c,d,e,f ); |
|---|
wartości parametrów
| Parametr | Opis | Graj |
|---|---|---|
| a | Wagi rysunku poziomo | Graj " |
| b | Pochylać rysunku poziomo | Graj " |
| c | Pochylać rysunku pionowo | Graj " |
| d | Wagi rysunku pionowo | Graj " |
| e | Przesuwa rysunek poziomo | Graj " |
| f | Przesuwa rysunek pionowo | Graj " |