Canvas动态案例

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="UTF-8">
5
    <title></title>
6
  </head>
7
  <body>
8
    <canvas id="draw" width="220" height="320" style="background-color: skyblue"></canvas>
9
  </body>
10
</html>
11
<script type="text/javascript">
12
  var draw=document.getElementById('draw');
13
  var cvs=draw.getContext('2d');
14
  var img=new Image;
15
  img.src='walkingdead.png';//添加图片地址
16
  img.onload=function(){//图片上有10张小图横着排列
17
    var width=this.width/10;
18
    var height=this.height;
19
    var i=0;
20
    window.setInterval(function(){
21
      cvs.clearRect(0,0,draw.width,draw.height);//清除上一个图片
22
    cvs.drawImage(img,i*width,0,width,height,0,0,width,height);
23
    if(i==9){
24
      i=0
25
    }else{i++;}
26
    },200);
27
  }
28
</script>