Question

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

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

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

你可能希望在那里拖延一段时间，因为害怕被人眼察觉不到/他们走得太快。

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

1 个答案: