Przykład
Narysować prostokąt dodać nową macierz transformacji transform() ponownie wyciągnąć prostokąta dodać nową macierz transformacji, a następnie ponownie zwrócić prostokąta. Zauważ, że za każdym razem wywołać 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 " Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| transform() | 4.0 | 9.0 | 3.6 | 4.0 | 10,1 |
Definicja i Wykorzystanie
Każdy obiekt w obszarze roboczym znajduje się bieżącą macierz transformacji.
transform() Sposób zastępuje bieżącą macierz transformacji. Mnoży się bieżącą macierz transformacji matrycy opisanej przez:
| za | do | mi |
| b | re | fa |
| 0 | 0 | 1 |
Innymi słowy, transform() metoda pozwala skalować, obracać, przesuwać i pochylać aktualny kontekst.
Note: Transformacja wpłynie tylko rysunki wykonane po transform() wywoływana jest metoda.
Note: transform() metoda zachowuje się w stosunku do innych przekształceń dokonanych przez rotate() , scale() , translate() lub transform() . Przykład: Jeśli już ustawić swój rysunek do skali przez dwa, i transform() metoda skaluje swoje rysunki przez dwa, rysunki skala będzie teraz przez cztery.
Tip: 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 | Pochylić rysunku poziomo | Graj " |
| c | Pochylić rysunku pionowo | Graj " |
| d | Wagi na rysunku pionowo | Graj " |
| e | Przesuwa rysunek poziomo | Graj " |
| f | Przesuwa rysunek pionowo | Graj " |
<Płótno Przedmiot