HTML canvas setTransform() Metoda
Przykład
Narysuj prostokąt, zresetuj i utwórz nową macierz transformacji za pomocą setTransform(), narysuj prostokąt ponownie, zresetuj i utwórz nową macierz transformacji, a następnie ponownie narysuj prostokąt. Zauważ, że za każdym razem, gdy wywołasz setTransform(), resetuje poprzednią macierz transformacji, a następnie buduje nową macierz, więc w poniższym przykładzie czerwony prostokąt nie jest pokazany, 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);
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
Definicja i użycie
Każdy obiekt na płótnie ma aktualną macierz transformacji.
Metoda setTransform() resetuje bieżącą transformację do macierzy tożsamości, a następnie uruchamia transform() z tymi samymi argumentami.
Innymi słowy, metoda setTransform() umożliwia skalowanie, obracanie, przesuwanie i pochylanie bieżącego kontekstu.
Uwaga: Transformacja wpłynie tylko na rysunki wykonane po wywołaniu metody setTransform.
| Składnia JavaScript: | kontekst .setTransform( a,b,c,d,e,f ); |
|---|
Wartości parametrów
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ Odniesienie do płótna HTML