图片canvas播放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body style="height:780px;width:640px">
  <div style="height:780px;width:640px">
    <canvas id="my_canvas" width="640" height="780"></canvas>
    <canvas id="canvas" width="640" height="780"></canvas>
  </div>
<script>

 var a ="my_canvas" ;
 playImages(['1.png','2.png','3.png'],a);
  //背景图片播放
  function playImages(a,b){
    var arrImgs = a;
    var convas = document.getElementById(b);
    var ctx = convas.getContext('2d');  
    var curImg = new Image();
    var index = 0;
    curImg.onload = function(){    
      ctx.drawImage(curImg,0,0);
    }
    setInterval(function(){
      curImg.src = arrImgs[index];
      index = index + 1;
      if ( index === arrImgs.length ){
        index = 0;
      }
    },200); 
  }
  //预加载图片
</script>  
</body>

此处评论已关闭