循环浏览 Canvas 中的文件夹图像

Question

我试图让我的页面上的画布元素循环浏览文件夹中的一组图像。我已经想出了如何在画布上设置图像，但我不确定如何一个接一个地制作多个图像。

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

这是我的网站，它使用一张图片。 Onload 它显示图像，在设定的时间画布被隐藏并出现回复按钮后：http://www3.carleton.ca/clubs/sissa/html5/

我正在尝试让所有图像 (25) 一个接一个地快速显示。有点像Marvel intro animation，但更糟糕:)

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

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';
}

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

Answer 1

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)}
    }
}

您可能希望在此处延迟，以免被人眼察觉/他们走得太快。