<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>canvas導入序列幀</title>
</head>
<body>
<canvas id="animation_canvas" width="640" height="1030" style="background-color: #fff;"></canvas>
</body>
<script>
//初始化參數
var canvas = null;
var ctx = null;
//預加載序列圖片
function loadImages(sources,callback){
var loadedImages = 0;
var numImages = 0;
var images=[];
var clearWidth=canvas.width;
var clearHeight=canvas.height;
// get num of sources
numImages=sources.length;
for (var i=0,len=sources.length;i<len;i++) {
images[i] = new Image();
//當一張圖片加載完成時執行
images[i].onload = function(){
//當所有圖片加載完成時，執行回調函數callback
if (++loadedImages >= numImages) {
callback(images);
}
};
//把sources中的圖片信息導入images數組
images[i].src = sources[i];
// console.log(images);
}
}
//播放圖片動畫
function playImages(images){
var imageNum=images.length;
var imageNow=0;
setInterval(function(){
// ctx.fillStyle="rgba(0,0,0,0)";
ctx.clearRect(0,0,640,1030);
ctx.fillRect(0, 0, 640, 1030);
ctx.drawImage(images[imageNow], 0, 0, 640, 1030);
imageNow++;
if(imageNow>=imageNum){
imageNow=89;
}
},100)
}
//初始化
window.onload = function(){
var sources = [];
//構建圖片序列數據
for(var i=0;i<=146;i++){
sources[i] = 'images/0/01_' + i + '.png';//根據項目修改
}
canvas = document.getElementById("animation_canvas");
canvas.width = 640;
canvas.height = 1030;
ctx = canvas.getContext("2d");
//ctx.globalAlpha=0.5
//執行圖片預加載，加載完成后執行main
loadImages(sources,function(images){
playImages(images)
});
};
</script>
</html>
