HTML canvas setTransform () Metoda
Příklad
Nakreslete obdélník, resetujte a vytvořte novou transformační matici pomocí setTransform(), nakreslete obdélník znovu, resetujte a vytvořte novou transformační matici a poté nakreslete obdélník znovu. Všimněte si, že pokaždé, když zavoláte setTransform(), obnoví předchozí transformační matici a poté vytvoří novou matici, takže v příkladu níže není červený obdélník zobrazen, protože je pod modrým obdélníkem:
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);
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která tuto metodu plně podporuje.
Method | |||||
---|---|---|---|---|---|
setTransform() | 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 setTransform() resetuje aktuální transformaci na matici identity a poté spustí transform() se stejnými argumenty.
Jinými slovy, metoda setTransform() umožňuje škálovat, otáčet, přesouvat a zkreslovat aktuální kontext.
Poznámka: Transformace ovlivní pouze výkresy vytvořené po volání metody setTransform.
Syntaxe JavaScriptu: | kontext .setTransform( a, b, c, d, e, f ); |
---|
Hodnoty parametrů
Parameter | Description | Play it |
---|---|---|
a | Scales the drawings horizontally | |
b | Skews the drawings horizontally | |
c | Skews the drawings vertically | |
d | Scales the drawings vertically | |
e | Moves the the drawings horizontally | |
f | Moves the the drawings vertically |
❮ Objekt plátna