canvas小案例（小动画）
案例简介
刚开始学canvas动画，简单的线条绘图已经掌握，想学下动画，所以写这个来练练手，写的不是太好，用到的精灵图是在网上找的QQ企鹅，通过裁剪精灵图且依次显示达到动画的效果。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas width="800" height="800" style="border: 1px solid red"></canvas>
<script>
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext('2d')
var image = new Image();
image.onload = function () {
var imageWidth=image.width;
var imageHeight=image.height;
var qqwidth=imageWidth/6;
var qqheight=imageHeight/2;
var index=0;
var x0=ctx.canvas.width/2-qqwidth/2;
var y0=ctx.canvas.height/2-qqheight/2;
ctx.drawImage(image,0,0,qqwidth,qqheight,x0,y0,qqwidth,qqheight);
setInterval(function () {
index ++;
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.drawImage(image,index*qqwidth,0,qqwidth,qqheight,x0,y0,qqwidth,qqheight);
if(index>=5){
index=0;
}
},100)
};
image.src='timg.jpg'
</script>
</body>
</html>
动态图如图：
