html5使用new image()创建的图片直接使用drawImage画的时候为空白
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。o_0。
更新时间：
2016-11-17 09:54:54
温馨提示：
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
如下代码
var im=new Image(); im.src='./0.jpg'; canvas.drawImage(im, _x, 0, this.width, this.height, 0, 0, cw, ch);
下面代码运行后可能为空白,是因为new Image加载图片是异步加载的,图片还没有加载到浏览器下面的代码已经开始使用啦，
处理方法是等图片加载完后再调用下面的画图代码,要放到图片加载完成的回掉函数里面
如下写一个加载图片的带回调的函数,
function loadImage(url, callback) {
//创建一个Image对象，
var img = new Image();
img.src = url;
// 如果图片已经存在于浏览器缓存，直接调用回调函数
if (img.complete) {
callback.call(img);
return;
}
//图片下载完毕时异步调用callback函数。
img.onload = function() {
//将回调函数的this替换为Image对象
callback.call(img);
};
}使用方法：
loadImage('./0.jpg', function() {
//this就是图片对象
ctx.drawImage(this, _x, 0, this.width, this.height, 0, 0, cw, ch);
});
