canvas画图的一个坑

今天想用canvas的drawImage接口显示一张图片，然后对做缩小操作时，遇到了个小问题。

drawImage的使用还是很简单的，先创建一个image对象可以是img标签，也可以用new Image创建。然后设置src和onload函数。示例如下：

//获取canvas对象

var canvas = document.getElementById("test");

var ctx = canvas.getContext("2d");

var img = new Image()；

img.src = "images/img.png";

img.onload = function(){

ctx.drawImage(img,0,0);

}

如果要缩放只需添加ctx.scale(2,2)就OK。到这里都没什么问题，接下来就出问题。我想在canvas的不同地方显示同一图片，其中一个地方是缩小图，还一个地方不变。然后我的代码变成了：

var img = new Image()；

img.src = "images/img.png";

img.onload = function(){

ctx.drawImage(img,0,0);

}

ctx.scale(0.2,0.2)

var img = new Image()；

img.src = "images/img.png";

img.onload = function(){

ctx.drawImage(img,10,10);

}

这时候问题是有时候第一张图片也被缩小了0.2倍。正确的做法是把scale这个调用放到onload中。这时应该就明白了，其实很简单，onload是在图像加载完时调用的，而第一张图片我们不能确定它是在scale设置之前就加载完了还是之后。当然第二张图片肯定没问题，我们在加载之前就先设置了scale。

最后代码变成了：

var img = new Image()；

img.src = "images/img.png";

img.onload = function(){

ctx.drawImage(img,0,0);

}

var img = new Image()；

img.src = "images/img.png";

img.onload = function(){.

ctx.save();

ctx.scale(0.2,0.2)

ctx.drawImage(img,10,10);

ctx.restore();

}