Metoda HTML canvas setTransform()
Definicja i użycie
Każdy obiekt na płótnie ma bieżącą macierz transformacji.
setTransform() metoda zresetuje bieżącą macierz transformacji do macierzy jednostkowej, a następnie uruchomi ją z tymi samymi parametrami transform().
Innymi słowy, setTransform() pozwala na skalowanie, obracanie, przesuwanie i pochylanie bieżącego środowiska.
Uwaga:Ta transformacja wpływa tylko na rysowanie po wywołaniu metody setTransform().
Przykład
Narysuj prostokąt, za pomocą setTransform() zresetuj i utwórz nową macierz transformacji, ponownie narysuj prostokąt, zresetuj i utwórz nową macierz transformacji, a następnie jeszcze raz narysuj prostokąt. Proszę zauważyć, że w poniższym przykładzie nie zostanie wyświetlony czerwony prostokąt, ponieważ znajduje się pod niebieskim prostokątem:
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);
Gramatyka
context.setTransform(a,b,c,d,e,f);
Wartości parametrów
| Parametry | Opis |
|---|---|
| a | Obrot pionowy |
| b | Rysowanie poziome |
| c | Rysowanie pionowe |
| d | Skalowanie pionowe |
| e | Rysowanie poziome |
| f | Rysowanie pionowe |
Obsługa przeglądarek
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Uwaga:Internet Explorer 8 i wcześniejsze wersje nie obsługuje elementu <canvas>.
