Metoda transform() canvas HTML
Definicja i użycie
Każdy obiekt na płótnie ma bieżącą macierz transformacji.
transform() Metoda zastępuje bieżącą macierz transformacji. Operuje na bieżącej macierzy transformacji za pomocą macierzy opisanej poniżej:
a c e b d f 0 0 1
Innymi słowy, transform() pozwala na skalowanie, obracanie, przesuwanie i pochylanie bieżącego środowiska.
Komentarz:Ta transformacja wpłynie tylko na rysowanie wykonane po wywołaniu metody transform().
Komentarz:Zachowanie metody transform() względem rotate(),scale(),translate() lub inne transformacje wykonane za pomocą transform(). Na przykład: jeśli już ustawisz rysowanie na dwukrotne powiększenie, metoda transform() powiększy rysowanie dwukrotnie, a Twoje rysowanie ostatecznie będzie powiększone czterokrotnie.
Wskazówka:Proszę zobaczyć setTransform() Metoda, która nie zachowuje się względem innych transformacji.
Przykład
Narysuj prostokąt; dodaj nową macierz transformacji za pomocą transform() i rysuj prostokąt ponownie; dodaj nową macierz transformacji i rysuj prostokąt ponownie. Proszę zauważyć, że za każdym razem, gdy wywołujesz transform(), buduje ona 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);
Gramatyka
context.transform(a,b,c,d,e,f);
Wartości parametrów
| Parametry | Opis |
|---|---|
| a | Skalowanie poziome |
| b | Nakładowanie poziome |
| c | Nakładowanie pionowe |
| d | Skalowanie pionowe |
| e | Rysowanie poziome |
| f | Rysowanie pionowe |
Obsługa przeglądarek
Numer w tabeli wskazuje 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 |
Komentarz:Przeglądarki Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.
