html canvas scale()方法缩放画布上下文

scale() 方法可以改变绘图（缩放）的坐标系统。

语法：

context.scale(scalewidth,scaleheight);

其中，scalewidth 是横向的缩放因子，scaleheight 是纵向的缩放因子。

比如，缩放因子为 2 和 0.5 的情况：

• scalewidth 为 2，则横向放大两倍。
• scalewidth 为 0.5，则横向缩小一半。
• scaleheight 为 2，则纵向放大两倍。
• scaleheight 为 0.5，则纵向缩小一半。

下面的例子，我们将 scale() 方法用于改变画布上下文：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);

// 缩小为原来的一半
ctx.scale(0.5,0.5);

// 再次绘制红色矩形
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);

上面的例子中，我们绘制了一个红色的矩形，使用 scale() 方法缩小为原来的一半，再次绘制红色矩形，此时矩形的大小就变成原来的一半。