Question

我想使用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);

}

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（）函数。

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

1 个答案: