Question

我知道你不能简单地在画布上使用.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 vars或对它们执行某些操作以确保它们已定义。

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

Canvas .gif动画

1 个答案: