最新的Web开发教程
 

HTML canvas scale() Method

<画布对象

例

绘制一个矩形，规模为200％，然后再绘制矩形：

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);
试一试»

浏览器支持

在表中的数字规定，完全支持方法的第一个浏览器版本。

方法
scale() 4 9 3.6 4 10.1

定义和用法

的scale()方法缩放当前图形，更大或更小。

Note:如果您缩放绘图，未来所有的图纸也将被缩小。 定位也将缩小。 如果您scale(2,2) ; 图纸都需要进行两次从画布的左侧和顶部，只要您指定的位置。

JavaScript语法： context 。 scale( scalewidth,scaleheight ) ;

参数值

参数 描述 播放
scalewidth 缩放当前图形的宽度(1=100%, 0.5=50%, 2=200%, etc.) 播放 ”
scaleheight 缩放当前图形的高度(1=100%, 0.5=50%, 2=200%, etc.) 播放 ”
例子

更多示例

例

绘制一个矩形，规模为200％，再次绘制矩形，规模为200％，再次绘制矩形，规模为200％，再次提请矩形：

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);
试一试»
<画布对象