Canvas setTransform() -menetelmä

Canvas-referenssikirja

Määrittely ja käyttö

kaikki objektit kankaalla oma muunnosmatriisi.

setTransform() metodi asettaa nykyisen muunnosmatriisin nollamatriisiin ja suorittaa samat parametrit transform().

Toisin sanoen setTransform() sallii sinun skaalata, kiivertää, siirtää ja vinottaa nykyistä ympäristöä.

Huomautus:Tämä muunnos vaikuttaa vain setTransform() -menetelmän kutsumisen jälkeen tapahtuvaan piirtämiseen.

Esimerkki

Piirrä suorakulmio, aseta uusi muunnosmatriisi setTransform() -metodilla, piirrä suorakulmio uudelleen, aseta uusi muunnosmatriisi ja piirrä suorakulmio jälleen. Huomaa, että kun kutsuminen setTransform() asettaa aina takaisin edellisen muunnosmatriisin ja rakentaa uuden, punainen suorakulmio ei näy alla olevan sinisen suorakulmion alla:

Selaimesi ei tue HTML5 canvas -tagia.

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

Kokeile itse

Syntaksi

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

Parametrien arvot

Parametrit Kuvaus
a Horisontaalinen kierto piirustuksessa.
b Horisontaalinen vinottu piirustus.
c Pystysuuntaa vinottu piirustus.
d Pystysuuntaa zoomaava piirustus.
e Horisontaalinen liikkeiden piirtäminen.
f Pystysuuntainen liikkeiden piirtäminen.

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen selaimen version, joka tukee tätä ominaisuutta.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas>-elementtiä.

Canvas-referenssikirja