Canvas setTransform() metod
Definition och användning
Varje objekt på canvas har en nuvarande transformationsmatris.
setTransform() metoden återställer den aktuella transformationsmatrisen 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 bara ritningen efter att setTransform()anropats.
Exempel
Rita en rektangel, genom att använda setTransform() att återställa och skapa en ny transformationsmatris, rita rektangeln igen, återställa och skapa en ny transformationsmatris, och rita rektangeln igen.Observera att varje gång du anropar setTransform()återställs den tidigare transformationsmatrisen och en ny matris byggs, så i följande exempel visas inte den röda rektangeln 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 ritning. |
| b | Horisontell lutning ritning. |
| c | Vertikal lutning ritning. |
| d | Vertikal skalering 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 detta egenskap.
| 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.
