今天想用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();
}