Canvas scale() -menetelmä
Määrittely ja käyttötapa
scale() Metodi skaalaa nykyisen piirustuksen, suuremmaksi tai pienemmäksi.
Huomautus:Jos skaalaa piirustusta, kaikki sen jälkeen tehtävät piirustukset skaalataan. Sijoitus skaalataan myös. Jos kirjoittaa scale(2,2)Silloin piirustus sijoittuu kahden kerran etäisyydelle ruudun vasemmassa yläkulmassa.
Esimerkki
Esimerkki 1
Rivaa suorakulmio, suurenna 200%, rivaa suorakulmia uudelleen:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Vinkki:Lisää esimerkkejä sivun alaosassa.
Syntaksi
context.scale(scalewidth,scaleheight);
Parametrin arvo
| Parametri | Kuvaus |
|---|---|
| scalewidth | Skaalaa nykyisen piirustuksen leveys (1=100%, 0.5=50%, 2=200%, jne.). |
| scaleheight | Skaalaa nykyisen piirustuksen korkeus (1=100%, 0.5=50%, 2=200%, jne.). |
Lisää esimerkkejä
Esimerkki 2
Rivaa suorakulmio; suurenna 200%, rivaa suorakulmioa uudelleen; suurenna 200%, rivaa suorakulmia uudelleen; suurenna 200%, rivaa suorakulmia uudelleen:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan siihen ominaisuuden selaimen version.
| 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ä.
