HTML canvas transform() methode
Definitie en gebruik
Elk object op het canvas heeft een huidige transformatiematrix.
transform() Deze methode vervangt de huidige transformatiematrix. Het opereert de huidige transformatiematrix met de volgende matrix:
a c e b d f 0 0 1
In andere woorden, transform() laat u het huidige kader uitbreiden, draaien, verplaatsen en schuiven.
Note:Deze transformatie beïnvloedt alleen de tekening die na de aanroep van transform() wordt uitgevoerd.
Note:Het gedrag van de transform() methode is relatief aan rotate()enscale()entranslate() of andere transformaties die met transform() worden uitgevoerd. Bijvoorbeeld: Als u de tekening al naar twee keer heeft uitgebreid, verhoogt de transform() methode de tekening nogmaals naar twee keer, waardoor de tekening uiteindelijk vier keer groter wordt.
Tip:Bekijk setTransform() Methoden die geen gedrag vertonen ten opzichte van andere transformaties.
Voorbeeld
Teken een rechthoek; voeg een nieuwe transformatiematrix toe met transform() en teken de rechthoek opnieuw; voeg een nieuwe transformatiematrix toe en teken de rechthoek opnieuw. Let op: Elke keer dat u transform() aanroept, bouwt het op de vorige transformatiematrix:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Syntax
context.transform(a,b,c,d,e,f);
Parameter value
| Parameter | Description |
|---|---|
| a | Horizontal scaling drawing. |
| b | Horizontal skew drawing. |
| c | Vertical skew 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.
