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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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 | Scales the drawing horizontally | |
b | Skew the the drawing horizontally | |
c | Skew the the drawing vertically | |
d | Scales the drawing vertically | |
e | Moves the the drawing horizontally | |
f | Moves the the drawing vertically |
❮Płótno obiektu