Metoda transform() na płótnie Canvas
Definicja i użycie
Każdy obiekt na płótnie ma bieżącą macierz przekształceń.
transform() Metoda zastępuje bieżącą macierz przekształceń. Operuje na bieżącej macierzy przekształceń za pomocą macierzy opisanej poniżej:
a c e b d f 0 0 1
Innymi słowy, transform() pozwala na skalowanie, obracanie, przemieszczanie i nachylenie bieżącego środowiska.
Komentarz:Ta transformacja wpływa tylko na rysowanie po wywołaniu metody transform().
Komentarz:Zachowanie metody transform() względem rotate(),scale(),translate() lub inne przekształcenia zrealizowane 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:Zobacz również setTransform() Metoda, która nie zachowuje się względem innych przekształceń.
Przykład
Narysuj prostokąt; dodaj nową macierz przekształceń za pomocą transform(), rysuj prostokąt ponownie; dodaj nową macierz przekształceń i rysuj prostokąt ponownie. Proszę zauważyć, że za każdym razem, gdy wywołujesz transform(), buduje ona na poprzedniej macierzy przekształceń:
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 | Poziome skalowanie rysowania |
| b | Poziome nachylenie rysowania |
| c | Pionowy nachylenie rysowania |
| d | Pionowe skalowanie rysowania |
| e | Poziomy ruch rysowania |
| f | Pionowy ruch rysowania |
Obsługa przeglądarek
Tabela zawiera numery wersji przeglądarek, które w pełni obsługują 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:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.
