canvas渲染帧动画

<style>
    canvas{background:#ccc;}
    .load{position:absolute;left:0px;top:0px;width:100%;height:100%;background:#333;z-index:100;display:none;}
    .loading{width:50px;height:50px;margin:0 auto;border-radius:90%;background:#666;position:relative;top:50%;margin-top:-25px;-webkit-animation:turn 1s linear infinite;-moz-animation:turn 1s linear infinite;}
    .load p{font-size:11px;text-align:center!important;color:#fff;position:absolute;width:100%;left:0px;bottom:32%}
    .loading:before{content:'';display:block;background:-webkit-linear-gradient(#666,cyan);background:-moz-linear-gradient(#666,cyan);border-radius:0 50px 50px 0;height:50px;width:50%;top:0;position:absolute;right:0;z-index:1;}
    .loading:after{content:'';display:block;border-radius:90%;height:42px;width:42px;top:50%;left:50%;position:absolute;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);background:#333;z-index:1;}
    @-webkit-keyframes turn{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(360deg);}
    }
    @keyframes turn{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}
    }
    .videoBox{width:640px;height:1040px;background: #ccc;position: relative;}

    </style>
       
                    <div class="videoBox">
                            <canvas id="canvas" width="750" height="1040"></canvas><p></p>
                            <div class="load" id="loadWrap"><div class="loading"></div></div>
                    </div>
          

<script type="text/javascript">

var imgArr = [],source = {},now= 0,imgNum = 0,timer=null;
var canvas = document.querySelector('#canvas');
var videoBox = document.querySelector('.videoBox');
var view = {w : 750,h : 1040};
canvas.width = view.w;//屏幕宽 window.innerWidth
canvas.height = view.h;//屏幕高 window.innerHeight
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height);

//添加图片进数组
function pushImgArr (num) {
    document.querySelector('#loadWrap').style.display = 'block';
    imgArr = [];
    for( var i = 1;i<num;i++ ) {
        imgArr.push('videoimg/v'+i+'.jpg');
    };
    imgLoad ();
};
//图片加载
function imgLoad(){
    source['src'+now] = new Image();
    source['src'+now].src = imgArr[now];
    source['src'+now].onload = function(){
        now ++ ;
        if( now > imgArr.length-1 ){
            //加载成功
            document.querySelector('#loadWrap').style.display = 'none';
            //执行canvas渲染
            movieInit();
        }else{
            //递归加载
            imgLoad();
        };
    };
};
//canvas图片渲染
function movieInit (){
    clearInterval(timer);
    timer = setInterval(function(){
        if( imgNum == imgArr.length ){
            clearInterval(timer);
        }else{
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.drawImage(source['src'+imgNum],0,0,canvas.width,canvas.height);
            imgNum++;
        };
    },70);
};
//按钮点击开始播放
document.querySelector('#btn').onclick = function(){
    now = 0;
    imgNum = 0;
    pushImgArr("图片总数");
};
</script>