HTML canvas transform() metode
Definition og brug
Hver objekt på canvas har en current transformationsmatrice.
transform() Metode erstatter den aktuelle transformationsmatrice. Den opererer med den aktuelle transformationsmatrice med nedenstående beskrevne matrice:
a c e b d f 0 0 1
Med andre ord tillader transform() dig at skalere, rotere, flytte og skæve det aktuelle miljø.
Bemærk:Denne transformation påvirker kun tegning efter transform() metoden kaldes.
Bemærk:transform() metodes opførsel er relateret til rotate()ogscale()ogtranslate() eller andre transformationer udførte med transform(). For eksempel: Hvis du allerede har sat tegningen til at forstørre med to gange, vil transform() metoden forstørre tegningen med to gange, og din tegning vil til sidst blive forstørret fire gange.
Tip:Se setTransform() Metode, der ikke vil opføre sig relativt til andre transformationer.
Eksempel
Tegn en rektangel; tilføj en ny transformationsmatrice ved hjælp af transform() og tegn rektanglen igen; tilføj en ny transformationsmatrice og tegn rektanglen igen. Bemærk, at hvert gang du kalder transform(), opbygger den en ny transformationsmatrice på toppen af den tidligere:
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);
Syntaks
context.transform(a,b,c,d,e,f);
Parameter værdi
| Parameter | Beskrivelse |
|---|---|
| a | Horisontal skalering af tegning |
| b | Horisontal rotation af tegning |
| c | Vertikal rotation af tegning |
| d | Vertikal skalering af tegning |
| e | Horisontal bevægelses tegning |
| f | Vertikal bevægelses tegning |
Browser support
Tal i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.
