修改图片路径 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>canvas导入序列帧</title> <script> // 立即生成兼容VIEWPORT (function () { var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth / 640; var ua = navigator.userAgent; if (/Android (d+.d+)/.test(ua)) { // window.location.href = 'Android.html'; var version = parseFloat(RegExp.$1); if (version > 2.3) { // andriod 2.3以上 document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">'); } else { // andriod 2.3 document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } // IOS及其他系统 } else { document.write('<meta name="viewport" content="width=640, user-scalable=no">'); } })(); </script> <!--<link rel="stylesheet" href="css/index.css">--> </head> <body> <canvas id="animation_canvas" width="640" height="1030" style="background-color: #fff;"></canvas> </body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="http://h5.appro.cc/Resources/js/global.min.js"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="http://h5.appro.cc/Resources/js/wxOAuth.min.2.0.js"></script> <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> <script type="text/javascript" src="http://tajs.qq.com/stats?sId=52797855" charset="UTF-8"></script> </html>