0

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

}
4

1 回答 1

2

尝试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() 函数。

于 2013-02-07T09:09:59.067 回答