HTML canvas scale () method
Examples
Draw a rectangle, zoom in to 200%, and then draw a 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);
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
try it"
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support scale () method.
Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.
Definition and Usage
scale () method to zoom the current drawing to a larger or smaller.
NOTE: If you zoom in on the drawing, the drawing will be scaled after all.Positioning will be scaled. If you scale (2,2), then the drawing will be located in the upper left corner of the canvas twice as far from the location.
JavaScript syntax: | context .scale (scalewidth, scaleheight); |
---|
Parameter Value
参数 | 描述 |
---|---|
scalewidth | 缩放当前绘图的宽度(1=100%,0.5=50%,2=200%,依次类推)。 |
scaleheight | 缩放当前绘图的高度(1=100%,0.5=50%,2=200%,依次类推)。 |
More examples
Examples
Draw a rectangle; zoom to 200%, again drawing a rectangle; zoom to 200%, again drawing a rectangle; zoom to 200%, once again drawing a rectangle:
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);
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"
HTML canvas Reference Manual