Javascript 循环浏览画布中的文件夹图像

我试图让页面上的canvas元素在文件夹中的一组图像中循环。我已经知道如何在画布上设置图像，但我不知道如何一个接一个地处理多个图像

我认为可以使用for循环和数组，但我不确定最好的方法是将所有图像存储在一个数组中

这是我的网站，它使用一个图像。Onload在设置时间画布隐藏并出现回复按钮后显示图像：

我正在尝试的是让所有的图像（25）以相当快的速度一个接一个地显示出来。有点像，但最糟糕的是：）

这就是我到目前为止为设置画布所做的工作

window.addEventListener("load", initCanvas);

var canvas, play, ctx, playLenght, img; 

function initCanvas(){
    getElements();    
    setCanvas();
}

function getElements(){
    canvas = document.getElementById('canvas');    
    play = document.getElementById('canvasPlay');
    play.addEventListener("click",setCanvas);
}

function setCanvas(){

    //Hide ctx play button
    play.style.visibility = 'hidden';

    //Make ctx visible   
    canvas.style.visibility = "visible";

    ctx = canvas.getContext("2d");

    //Clear ctx
    ctx.clearRect(0,0,canvas.width, canvas.height);


    playLenght = 3000;

    startAnimation();

    setTimeout(hideCanvas, playLenght);    
}

function startAnimation(){
    img = new Image();
    img.src ='images/canvas/canvas.batman.jpg';
    img.onload = function(){ctx.drawImage(img,0,0, canvas.width,canvas.height)}
}

function hideCanvas(){
    canvas.style.visibility = 'hidden';
    play.style.visibility = 'visible';
}

这是一个作业，所以我不允许在这里使用画布以外的任何东西

函数startAnimation（）{
function startAnimation(){
    var images = {"imagepath1","imagepath2"... all the way to 25!};
    for(int i=0; i<25; i++)
    {
        img = new Image();
        img.src = images[i];
        img.onload = function(){ctx.drawImage(img,0,0, canvas.width,canvas.height)}
    }
}

var images={“imagepath1”、“imagepath2”…一直到25！}；
对于（inti=0；我可以像setTimeout这样处理它吗？是的……对于（）…setTimeout（function（）{img=new Image（）…}，1000）；玩转它…现在我想起来了，我不认为这会起作用，因为setTimeout会继续调用内部函数，不允许for循环完成和迭代。这有什么意义吗？是的，也许…一个延迟会是最好的：是的，这对我来说是有效的。谢谢。只需要确保在我手动时重置计数器艾尔重播了。但除此之外，它正是我想要的。谢谢。