Question

所以我正在尝试用图像做一些简单的javascript动画，这就是我所知道的。我可以加载文件，但它只是显示'最终结果'而没有实际的移动（除非我通过控制台逐步完成每个动作）。我很确定我需要在我的代码中的某处使用setTimeout，但似乎无法找到使用它的正确方法。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img;    
img = new Image();
img.src = "img/background4x3.png";

var sun;    
sun = new Image();
sun.src = "img/rsz_sun_200x200.png";
var y = 250;

var func1 = function (y) {

ctx.clearRect(0, 0, 600, 500);
ctx.drawImage(img, 0, 0, 600, 500);
ctx.globalCompositeOperation = 'source-over';
setTimeout(100000);
ctx.drawImage(sun, 5, y);

};

img.onload = function() {
 //x = 1;
 while(y > 150) {
     func1(y);
     y = y - 5;
     setTimeout(100000);
    }       
};

Answer 1

这不是setTimeout的正确用法。它不会睡觉＃34;这一次。该脚本在一段时间后才运行一个函数。请在使用前阅读documentation。

setTimeout(myFunction, 1000); // runs myFunction after a second

在您的情况下，有几种方法可以正确地执行此操作。例如，您可以使用setInterval。就像这样：

var y = 250, interval;

var func1 = function () {    
    if (y < 150) {
        clearInterval(interval);
        return;
    }

    ctx.clearRect(0, 0, 600, 500);
    ctx.drawImage(img, 0, 0, 600, 500);
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(sun, 5, y);    

    y = y - 5;
};

img.onload = function() {
    func1();
    interval = setInterval(func1, 10000);
};

或以另一种方式使用setTimeout：

var y = 250, interval;

var func1 = function () {    
    ctx.clearRect(0, 0, 600, 500);
    ctx.drawImage(img, 0, 0, 600, 500);
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(sun, 5, y);    

    y = y - 5;
    if (y > 150) {
        setTimeout(func1, 1000);
    }
};

img.onload = function() {
    func1();
};

无法查看我的javascript动画的移动？

1 个答案: