HTML canvas transform() metod

HTML5 Canvas referenshandbok

Definition och användning

Varje objekt på canvas har en current transformation matrix.

transform() Metoden ersätter den aktuella transformationsmatrisen. Den opererar den aktuella transformationsmatrisen med följande matris:

a  c  e
b  d  f
0  0  1

Med andra ord tillåter transform() dig skalera, rotera, flytta och luta den aktuella miljön.

Kommentar:Denna transformation påverkar bara ritningen efter att transform() metoden har anropats.

Kommentar:transform() metodens beteende är relaterat till rotate()ochscale()ochtranslate() eller andra transformationer genom transform(). Till exempel: om du redan har satt ritningen till att förstora två gånger, kommer transform() metoden att förstora ritningen två gånger, och din ritning kommer slutligen att förstora fyra gånger.

Tips:Se setTransform() Metoder som inte kommer att påverkas av andra transformationer.

Exempel

Rita en rektangel; lägg till en ny transformationsmatris genom transform() och rita rektangeln igen; lägg till en ny transformationsmatris och rita rektangeln igen.Observera att varje gång du anropar transform() byggs den på den föregående transformationsmatrisen:

Din webbläsare stöder inte HTML5 canvas-taggen.

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);

Prova själv

Syntax

context.transform(a,b,c,d,e,f);

Parametervärde

Parameter Beskrivning
a Horisontell skalning i ritning
b Horisontell böjning i ritning
c Vertikal böjning 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 denna 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.

HTML5 Canvas referenshandbok