HTML canvas setTransform() methode
Definitie en gebruik
Elk object op het canvas heeft een huidige transformatiematrix.
setTransform() methode reset de huidige transformatiematrix naar de eenheidsmatrix en voert vervolgens dezelfde parameters uit. transform().
In andere woorden, setTransform() staat u toe om de huidige omgeving te schalen, draaien, verplaatsen en hellen.
Note:Deze transformatie beïnvloedt alleen de tekeningen die na de aanroep van setTransform() worden uitgevoerd.
Voorbeeld
Teken een rechthoek, reset en maak een nieuwe transformatiematrix met setTransform(), teken een rechthoek opnieuw, reset en maak een nieuwe transformatiematrix, en teken vervolgens opnieuw een rechthoek. Let op, wanneer u setTransform() aanroept, reset het de vorige transformatiematrix en bouwt een nieuwe matrix, dus in het volgende voorbeeld wordt de rode rechthoek niet weergegeven, omdat hij onder de blauwe rechthoek ligt:
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);
Syntax
context.setTransform(a,b,c,d,e,f);
Parameter value
| Parameter | Description |
|---|---|
| a | Horizontal rotation drawing. |
| b | Horizontal skewing drawing. |
| c | Vertical skewing drawing. |
| d | Vertical scaling drawing. |
| e | Horizontal movement drawing. |
| f | Vertical movement drawing. |
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
