html5使用new image()创建的图片直接使用drawImage画的时候为空白

来源:赵克立博客 分类: HTML5 标签:HTML5发布时间:2016-11-17 09:51:33最后更新:2016-11-17 09:54:54浏览:7407
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2016-11-17 09:54:54
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

QQ截图20161117095322.png

如下代码

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);
});



微信号:kelicom QQ群:215861553 紧急求助须知
Win32/PHP/JS/Android/Python