canvas的drawImage无法显示图像

Question

经测试，在firefox上可以显示图片，但是在chrome上无法显示,求教?#canvas{border:1pxsolidyellow;position:absolute;left:500px;top:50px;}demo.js:window.onload=function(){varCanvas=document.getElementById("canvas");varcxt=Canvas.getContext("2d");varbg=newImage();bg.src="../img/2-14020314314A26.jpg";cxt.drawImage(bg,0,0);};

Answer 1

window.onload=function(){
varCanvas=document.getElementById("canvas");
varcxt=Canvas.getContext("2d");
varbg=newImage();
//你指定了图片的地址，但是图片的加载是需要时间的
bg.src="../img/2-14020314314A26.jpg";
//执行完上面一行，马上就开始画这个图
//虽然bg这个对象有了，但是图片还没有加载完成，因此画的时候什么都没有
cxt.drawImage(bg,0,0);
};
改成这样：
window.onload=function(){
varCanvas=document.getElementById("canvas");
varcxt=Canvas.getContext("2d");
varbg=newImage();
//先指定一个回调函数，图片加载好之后自然会回来执行
bg.onload=function(){
cxt.drawImage(bg,0,0);
};
//加载图片，完成后执行刚才的函数
bg.src="../img/2-14020314314A26.jpg";
};
感兴趣的话可以来看看我的Gorgeous.JS。