javascript - Canvas .gif 动画

Question

我知道您不能简单地在 Canvas 上使用 .gif，所以我想先绘制图像，然后清除图像，然后间隔大约半秒，然后再绘制下一张图像，依此类推。

现在这就是我所做的，但我不确定间隔是否正确，因为我希望屏幕上的所有其他内容都按原样移动，甚至此时正在运行其他动画。(想想游戏中的爆炸)

我试过了，但是间隔似乎不起作用，它只是一个接一个地绘制所有内容并清除最后一个，所以你什么都看不到。

var wide = 70;
var high = 70;


ctxExplosion.drawImage(spriteImage,0,1250,wide,high,100,100,wide,high);
setInterval(500);  
ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight);

ctxExplosion.drawImage(spriteImage,77,1250,wide,high,100,100,wide,high);
setInterval(500);  
ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight);

ctxExplosion.drawImage(spriteImage,150,1250,wide,high,100,100,wide,high);
setInterval(500);  
ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight);

ctxExplosion.drawImage(spriteImage,232,1250,wide,high,100,100,wide,high);
setInterval(500);  
ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight);

我希望它像动画一样显示，但也不希望图层的清除干扰当时发生的其他爆炸。有什么办法解决这个问题吗？

Answer 1

这是因为您没有正确使用 setInterval。 setInterval 有 2 个参数，一个在指定时间运行的函数，以及等待时间。

你说的是:

• 画出我的形象
• 半秒内什么都不做
• 清除我的图像
• ...等等...

例如，您可以这样做:

/* Takes an array of offsets, and returns an interval timer representing the current animation*/
makeExplosion = function(offsetArray, frameRate) {
    var currentFrame = 0, interval = null;

    var animFunc = function() {
        ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight);
        ctxExplosion.drawImage(spriteImage,offsetArray[currentFrame],1250,wide,high,100,100,wide,high);

        currentFrame++;
        if (interval && (currentFrame > offsetArray.length)) {
            clearInterval(interval); 
        }
    }

    interval = setInterval(animFunc, frameRate);

    return interval;
}

这将运行您的动画，并返回一个间隔对象，以便您可以根据需要尽快取消动画。这只是一个示例，您需要传入 wide 和 high 变量，或者对它们执行一些操作以确保它们已定义。

我还没有测试代码，但它应该接近工作。