HTML canvas transform() Metoda
Příklad
Nakreslete obdélník, přidejte novou transformační matici pomocí transform(), nakreslete obdélník znovu, přidejte novou transformační matici a poté nakreslete obdélník znovu. Všimněte si, že pokaždé, když zavoláte transform(), staví na předchozí transformační matici:
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);
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která tuto metodu plně podporuje.
| Method | |||||
|---|---|---|---|---|---|
| transform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definice a použití
Každý objekt na plátně má aktuální transformační matici.
Metoda transform() nahrazuje aktuální transformační matici. Vynásobí aktuální transformační matici maticí popsanou takto:
| A | C | E |
| b | d | F |
| 0 | 0 | 1 |
Jinými slovy, metoda transform() vám umožňuje škálovat, otáčet, přesouvat a zkreslovat aktuální kontext.
Poznámka: Transformace ovlivní pouze výkresy vytvořené po zavolání metody transform().
Poznámka: Metoda transform() se chová relativně k jiným transformacím provedeným pomocí rotation(), scale(), translate() nebo transform(). Příklad: Pokud jste již nastavili měřítko výkresu po dvou a metoda transform() změní měřítko výkresů po dvou, výkresy se nyní změní na čtyři.
Tip: Vyzkoušejte metodu setTransform() , která se nechová relativně k jiným transformacím.
| Syntaxe JavaScriptu: | kontext .transform( a, b, c, d, e, f ); |
|---|
Hodnoty parametrů
| 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 |
❮ Objekt plátna