Przykład
Narysuj prostokąt, reset i utworzyć nową macierz transformacji setTransform() , ponownie narysować prostokąt, reset i utworzyć nową macierz transformacji, a następnie ponownie narysować prostokąt. Zauważ, że za każdym razem dzwonić setTransform() , resetuje 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 " Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, który w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| setTransform() | tak | 9,0 | tak | tak | tak |
Definicja i Wykorzystanie
Każdy obiekt na płótnie posiada aktualną macierz transformacji.
setTransform() metoda resetuje obecny przekształcić do matrycy tożsamości, a następnie uruchamia transform() z tymi samymi argumentami.
Innymi słowy, setTransform() metoda pozwala na skalowanie, obracanie, przesuwanie i pochylanie aktualny kontekst.
Uwaga: Transformacja dotyczyć będą jedynie rysunki wykonane po wywołaniu metody setTransform nazywa.
| Składnia JavaScript: | context.setTransform( a,b,c,d,e,f ); |
|---|
wartości parametrów
| Parametr | Opis | Graj |
|---|---|---|
| a | Wagi rysunki poziomo | Graj " |
| b | Zniekształca rysunki poziomo | Graj " |
| c | Zniekształca rysunki pionowo | Graj " |
| d | Wagi rysunki pionowo | Graj " |
| e | Przenosi rysunki poziomo | Graj " |
| f | Przenosi rysunki pionowo | Graj " |