HTML canvas setTransform() metode
Definition og brug
Hver objekt på canvas har en nuværende transformationsmatrice.
setTransform() metoden nulstiller den aktuelle transformationsmatrice til enhedsmatricen og kører derefter med de samme parametre transform().
SetTransform() giver dig mulighed for at skalere, rotere, flytte og skæve det aktuelle miljø.
Bemærk:Denne transformation påvirker kun tegning efter kald af setTransform().
Eksempel
Tegn en rektangel, genindstil og opret en ny transformationsmatrice med setTransform(), tegn rektanglen igen, genindstil og opret en ny transformationsmatrice, og tegn rektanglen igen. Bemærk, at den røde rektangel ikke vises nedenfor, fordi den er under den blå rektangel: hver gang du kalder setTransform(), nulstiller den den tidligere transformationsmatrice og opretter en ny matrice, så i dette eksempel vil den røde rektangel ikke blive vist.
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);
Syntaks
context.setTransform(a,b,c,d,e,f);
Parameter værdi
| Parameter | Beskrivelse |
|---|---|
| a | Horisontal rotation tegning |
| b | Horisontal skævhed tegning |
| c | Vertikal skævhed tegning |
| d | Vertikal skalering tegning |
| e | Horisontal bevægelses tegning |
| f | Vertikal bevægelses tegning |
Browser support
Tallene 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.
