javascript - Canvas 内のフォルダー画像をループする

Question

フォルダー内の一連の画像をページ ループのキャンバス要素にしようとしています。キャンバスに画像を設定する方法を理解しましたが、複数の画像を次々に実行する方法がわかりません。

for ループと配列を使用して可能だと考えましたが、すべての画像を配列に格納する最善の方法がわかりません。

これは、1 つの画像で動作する私のサイトです。オンロードすると、一定時間キャンバスが非表示になり、返信ボタンが表示された後に画像が表示されます: http://www3.carleton.ca/clubs/sissa/html5/

私がしようとしているのは、すべての画像 (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';
}

これは課題なので、ここのキャンバス以外は使用できません。