javascript - 何时加载图像以使用Javascript函数drawImage()？

Question

我想使用drawImage()函数在Javascript动画中加载图像，但我当前的代码无法加载该图像。我想我需要在某个时候特别要求加载图像，但我不确定何时或如何加载。这个想法是制作一朵横跨 Canvas 的云。感谢您的帮助。

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

}

Answer 1

尝试new Image()而不是new image()

同时移动

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

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

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

(尽管实际上您必须确保不使用正确的偶数处理程序注册来覆盖任何现有的 window.onload 监听器。)还要延迟对 draw() 的第一次调用，直到图像出现已加载，例如如下所示:

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

我也想改变

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

至

setTimeout(function(){ 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()函数。