HTML canvas scale() methode
Definitie en gebruik
scale() de methode om het huidige tekeningsgebied te schalen, groter of kleiner maakt.
Note:Als u het tekeningsgebied schaalt, zullen alle volgende tekeningen ook worden geschaald. De定位 zal ook worden geschaald. Als u scale(2,2)dan zal de tekening zich op een locatie bevinden die twee keer verder van de linkerbovenhoek van het canvas verwijderd is.
Voorbeeld
Voorbeeld 1
Teken een rechthoek, schaal hem op 200%, en teken vervolgens opnieuw een rechthoek:
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);
Tip:Meer voorbeelden zijn beschikbaar aan de onderkant van de pagina.
Syntax
context.scale(scalewidth,scaleheight);
Waarde van parameter
| Parameter | Beschrijving |
|---|---|
| scalewidth | Schaal de breedte van het huidige tekeningsgebied (1=100%, 0.5=50%, 2=200%, enz.). |
| scaleheight | Schaal de hoogte van het huidige tekeningsgebied (1=100%, 0.5=50%, 2=200%, enz.). |
More examples
Example 2
Draw a rectangle; zoom in 200%, draw the rectangle again; zoom in 200%, then draw the rectangle again; zoom in 200%, draw the rectangle again:
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);
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
