Latest web development tutorials

HTML canvas scale () method

HTML canvas Reference Manual HTML canvas Reference Manual

Examples

Draw a rectangle, zoom in to 200%, and then draw a rectangle again:

YourbrowserdoesnotsupporttheHTML5canvastag.

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"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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%,依次类推)。


Examples

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:

YourbrowserdoesnotsupporttheHTMLcanvastag.

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"


HTML canvas Reference Manual HTML canvas Reference Manual