关于canvas画图的问题。。。急！！！

Question

function draw(){
var img=new Image();
img.src='img/1.jpg';
var ctx=document.getElementById('paint').getContext('2d');
ctx.drawImage(img,0,0,200,200);
}
window.addEventListener('load',draw,true);
。为什么要刷新一下浏览器才能看到图片？？？

Answer 1

是因为图片加载需要时间，还没加载完毕你就去绘制了。
我猜测：刷新时，之前图片已经加载过，浏览器已经做了缓存，省去了加载的时间，即能绘制。var img = new Image();
img.src = 'img/1.jpg';
img.onload = function() {
    var ctx = document.getElementById('paint').getContext('2d');
    ctx.drawImage(img,0,0,200,200);
}
修改成如上试试。

Answer 2

我用window.onload  DOM一级事件可以（不需要刷新浏览器）。。但是用window.addEventListener('load',handler,true)
DOM二级事件不行为什么呢

Answer 3

        var img=new Image();
img.src='img/1.jpg';
var ctx=document.getElementById('trails').getContext('2d');
function draw(){
ctx.drawImage(img,0,0,200,200);
}
window.addEventListener('load',draw,true); 把其它代码放到外面也可以