何时加载图像以使用Javascript函数drawImage（）？

我想使用drawImage（）函数在Javascript动画中加载一个图像，但当前代码中没有加载该图像。我想我需要明确要求在某个时候加载图像，但我不确定何时或如何加载。这个想法是制作一个穿过画布的云。谢谢你的帮助

function draw(x,y){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    x += 2;
    if(x>1000){
        x=0;
    }

    var cloud = new image();
    cloud.src='small_cloud.png';
    ctx.drawImage(cloud,x,0);

    var loopTimer = setTimeout('draw('+x+','+y+')',20);

}

尝试

newimage（）

而不是

newimage（）

还动

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');    
var cloud = new image();
cloud.src='small_cloud.png';

到

draw（）

函数之外，因为您只想设置这些内容一次。延迟此设置，直到浏览器有时间解析文档，例如使用

window.onload = function(){ ... };

（但实际上，您必须确保不覆盖任何现有窗口。通过使用正确的偶数处理程序注册来加载侦听器。）还要延迟对

draw（）

的第一次调用，直到图像加载完毕，例如：

cloud.onload = function(){
    draw(cloud, 0, 0);
}

我也会改变

var loopTimer = setTimeout('draw('+x+','+y+')',20);

到

因为您似乎没有使用loopTimer变量，并且因为传递setTimeout一个匿名函数而不是字符串被认为是更好的做法

最后，它看起来是这样的：

window.onload = function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');    
    var cloud = new image();
    cloud.src='small_cloud.png';    
    cloud.onload = function(){
        draw(ctx, cloud, 0, 0);
    };
};

function draw(ctx, cloud, x,y){
    x += 2;
    if(x>1000){
        x=0;
    }

    ctx.drawImage(cloud,x,0);

    setTimeout(function(){ draw(ctx, cloud, x, y); }, 20);
}

---

请注意，由于ctx不再在draw（）函数中定义，因为它是匿名window.onload函数的本地函数，因此还必须将ctx传递给draw（）函数。

执行drawImage时，是否实际加载了small_cloud.png？这两个命令之间只有1微秒左右的间隔：）因此在调用drawImage时可能没有要绘制的图像。回答得很好，非常感谢您的帮助。它现在可以工作了，只是在我用fillRect（）测试它时，有一个闪烁不存在。发生这种情况是因为drawImage（）的延迟吗？谢谢，很高兴我能帮忙！我刚刚意识到另外两件重要的事情应该移到draw（）函数之外，请参见编辑后的答案。我想这些改进很可能会有助于闪烁。否则，我不确定是什么导致了它，因为我对画布的使用不是很有经验。实际上，我不确定为什么，但当我将这两行从draw（）函数中移出时，它就停止工作了。好的。您必须确保

ctx

是全局的，以便可以从draw（）函数中引用它。另外，您希望延迟画布的查找。我会更新我的答案。

window.onload = function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');    
    var cloud = new image();
    cloud.src='small_cloud.png';    
    cloud.onload = function(){
        draw(ctx, cloud, 0, 0);
    };
};

function draw(ctx, cloud, x,y){
    x += 2;
    if(x>1000){
        x=0;
    }

    ctx.drawImage(cloud,x,0);

    setTimeout(function(){ draw(ctx, cloud, x, y); }, 20);
}