Płótno HTML Metoda transform()
Przykład
Narysuj prostokąt, dodaj nową macierz transformacji za pomocą transform(), ponownie narysuj prostokąt, dodaj nową macierz transformacji, a następnie ponownie narysuj prostokąt. Zauważ, że za każdym razem, gdy wywołujesz transform(), buduje ono poprzednią macierz 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);
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.
| Method | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
Definicja i użycie
Każdy obiekt na płótnie ma aktualną macierz transformacji.
Metoda transform() zastępuje bieżącą macierz transformacji. Mnoży obecną macierz transformacji przez macierz opisaną przez:
| a | C | mi |
| b | D | F |
| 0 | 0 | 1 |
Innymi słowy, metoda transform() umożliwia skalowanie, obracanie, przesuwanie i pochylanie bieżącego kontekstu.
Uwaga: Transformacja wpłynie tylko na rysunki wykonane po wywołaniu metody transform().
Uwaga: Metoda transform() zachowuje się w stosunku do innych przekształceń wykonanych przez rotate(), scale(), translate() lub transform(). Przykład: Jeśli już ustawiłeś skalowanie rysunku o dwa, a metoda transform() skaluje twoje rysunki o dwa, twoje rysunki będą teraz skalowane o cztery.
Wskazówka: sprawdź metodę setTransform() , która nie zachowuje się w stosunku do innych przekształceń.
| Składnia JavaScript: | kontekst .transform( 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