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() | Yes | 9.0 | Yes | Yes | Yes |
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 | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ HTML Canvas Reference