canvas的drawImage无法显示图像

Question

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

<style>
#canvas{
border:1px solid yellow;
position:absolute;
left:500px;
top:50px;
}
</style>

<script src="demo.js"></script>

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

Answer 1

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