Canvas scale() methode

Canvas reference manual

Definitie en gebruik

scale() methode om de huidige tekening te schalen, groter of kleiner.

Note:Als u de tekening schaalt, wordt alle latere tekening ook geschaald. De locatie wordt ook geschaald. Als u scale(2,2)，dan zal de tekening zich op een locatie bevinden die twee keer verder naar linksboven van het canvas ligt.

Voorbeeld

Voorbeeld 1

Teken een rechthoek, vergroot naar 200%, teken vervolgens een rechthoek:

Uw browser ondersteunt de HTML5 canvas tag niet.

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

Try it yourself

Tip:Meer voorbeelden worden aangeboden aan de onderkant van de pagina.

Syntax

context.scale(scalewidth,scaleheight);

Parameterwaarde

Parameter Beschrijving
scalewidth Zoom de huidige tekenbreedte in (1=100%, 0.5=50%, 2=200%, enz.).
scaleheight Zoom de huidige tekenhoogte in (1=100%, 0.5=50%, 2=200%, enz.).

Meer voorbeelden

Voorbeeld 2

Teken een rechthoek; vergroot naar 200%, teken vervolgens een rechthoek; vergroot naar 200%, teken vervolgens een rechthoek; vergroot naar 200%, teken vervolgens een rechthoek:

Uw browser ondersteunt de HTML canvas tag niet.

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

Try it yourself

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.

Canvas reference manual