HTML canvas setTransform() metod
Definition och användning
Varje objekt på canvas har en current transformation matrix.
setTransform() metoden återställer den aktuella transformmatrisen till enhetsmatrisen och kör med samma parametrar transform().
Med andra ord tillåter setTransform() dig skalera, rotera, flytta och luta den aktuella miljön.
Kommentar:Denna transformation påverkar endast ritningen efter att setTransform() har anropats.
Exempel
Rita en rektangel, återställ och skapa en ny transformmatris med setTransform(), Rita rektangeln igen, återställ och skapa en ny transformmatris, och rita rektangeln igen.Observera att när du anropar setTransform()återställs den tidigare transformmatrisen och en ny matris byggs, således visas inte den röda rektangeln i detta exempel eftersom den ligger under den blå rektangeln:
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);
Parametervärde
| Parameter | Beskrivning |
|---|---|
| a | Horisontell rotation i ritning |
| b | Horisontell skjutning i ritning |
| c | Vertikal skjutning i ritning |
| d | Vertikal skalning i ritning |
| e | Horisontell rörelse i ritning |
| f | Vertikal rörelse i ritning |
Webbläsarstöd
Tal i tabellen anger den första webbläsarversionen som helt stöder egenskapen.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.
