<!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>