Canvas setTransform() methode
Definitie en gebruik
Elk object op het canvas heeft een huidige transformatiematrix.
setTransform() methode reset het huidige transformatiematrix tot de eenheidsmatrix en voert het met dezelfde parameters uit transform().
In andere woorden, setTransform() staat u toe om de huidige omgeving te schalen, roteren, verplaatsen en hellen.
Note:Deze transformatie beïnvloedt alleen de tekening die na de oproep van setTransform() volgt.
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() oproept, reset het vorige transformatiematrix en bouwt een nieuwe matrix, dus in onderstaand voorbeeld wordt de rode rechthoek niet weergegeven, omdat deze 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);
Parameterswaarde
| Parameter | Beschrijving |
|---|---|
| a | Horizontale rotatiestekening. |
| b | Horizontale hellingstekening. |
| c | Verticale hellingstekening. |
| d | Verticale zoomtekening. |
| e | Horizontal drawing movement. |
| f | Vertical drawing movement. |
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.
