我试图让我的页面上的画布元素循环通过文件夹中的一组图像。我已经想出了如何在画布上设置图像,但我不确定如何一个接一个地制作多个图像。
我认为可以使用 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';
}
这是一个作业,所以我不能在这里使用除画布以外的任何东西。