javascript - canvas的drawImage无法显示图像-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - canvas的drawImage无法显示图像

伊谢尔伦 2017-04-10 15:20:09

[JavaScript讨论组]

645

经测试，在firefox上可以显示图片，但是在chrome上无法显示,求教?

demo.js:
window.onload=function(){
var Canvas=document.getElementById("canvas");
var cxt=Canvas.getContext("2d");
var bg=new Image();
bg.src="../img/2-14020314314A26.jpg";
cxt.drawImage(bg,0,0);
};

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(2)

PHP中文网2017-04-10 15:22:09 2楼

window.onload=function(){
    var Canvas=document.getElementById("canvas");
    var cxt=Canvas.getContext("2d");
    var bg=new Image();
    //你指定了图片的地址，但是图片的加载是需要时间的
    bg.src="../img/2-14020314314A26.jpg";
    //执行完上面一行，马上就开始画这个图
    //虽然bg这个对象有了，但是图片还没有加载完成，因此画的时候什么都没有
    cxt.drawImage(bg,0,0);
};

改成这样：

window.onload=function(){
    var Canvas=document.getElementById("canvas");
    var cxt=Canvas.getContext("2d");
    var bg=new Image();
    //先指定一个回调函数，图片加载好之后自然会回来执行
    bg.onload = function () {
        cxt.drawImage(bg,0,0);
    };
    //加载图片，完成后执行刚才的函数
    bg.src="../img/2-14020314314A26.jpg";
};

感兴趣的话可以来看看我的Gorgeous.JS。