Przykład
Narysować prostokąt, zerowanie i tworzą nową macierz transformacji setTransform() ponownie zwrócić prostokąta, zerowanie i tworzą nową macierz transformacji, a następnie ponownie zwrócić prostokąta. Zauważ, że za każdym razem wywołać setTransform() , to kasuje poprzednią macierz transformacji, a następnie buduje nową matrycę, więc w poniższym przykładzie, czerwony prostokąt nie jest widoczna, ponieważ jest pod niebieskim prostokącie:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(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 | |||||
|---|---|---|---|---|---|
| setTransform() | 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.
setTransform() Sposób resetuje obecny przekształcić do macierzy jednostkowej, a następnie uruchamia transform() o takich samych argumentów.
Innymi słowy, setTransform() metoda pozwala skalować, obracać, przesuwać i pochylać aktualny kontekst.
Note: Transformacja wpłynie tylko rysunki wykonane po metoda setTransform nazywa.
| Składnia JavaScript: | context . setTransform( a,b,c,d,e,f ) ; |
|---|
wartości parametrów
| Parametr | Opis | Graj |
|---|---|---|
| a | Wagi rysunków poziomo | Graj " |
| b | Pochylenie rysunków poziomo | Graj " |
| c | Pochylenie rysunków pionowo | Graj " |
| d | Wagi na rysunkach pionowo | Graj " |
| e | Przenosi rysunków poziomo | Graj " |
| f | Przenosi rysunków pionowo | Graj " |
<Płótno Przedmiot