HTML canvas setTransform () Methode
Voorbeeld
Teken een rechthoek, reset en maak een nieuwe transformatiematrix met setTransform(), teken de rechthoek opnieuw, reset en maak een nieuwe transformatiematrix en teken vervolgens de rechthoek opnieuw. Merk op dat elke keer dat u setTransform() aanroept, het de vorige transformatiematrix reset en vervolgens de nieuwe matrix bouwt, dus in het onderstaande voorbeeld wordt de rode rechthoek niet weergegeven, omdat deze zich onder de blauwe rechthoek bevindt:
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);
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
Definitie en gebruik
Elk object op het canvas heeft een huidige transformatiematrix.
De methode setTransform() stelt de huidige transformatie opnieuw in op de identiteitsmatrix en voert vervolgens transform() uit met dezelfde argumenten.
Met andere woorden, met de methode setTransform() kunt u de huidige context schalen, roteren, verplaatsen en scheeftrekken.
Opmerking: de transformatie is alleen van invloed op tekeningen die zijn gemaakt nadat de methode setTransform is aangeroepen.
| JavaScript-syntaxis: | context .setTransform( a,b,c,d,e,f ); |
|---|
Parameterwaarden
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ HTML Canvas-referentie