0

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

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

这是我的网站，它使用一张图片。Onload 它显示图像，在设定的时间画布被隐藏并出现回复按钮后：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';
}

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

4

1 回答 1

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

您可能想在那里延迟，以免被人眼察觉/他们走得太快。

于 2013-04-05T00:59:49.120 回答