简单酷炫的canvas动画

作为一个新人怀着激动而紧张的心情写了第一篇帖子还请大家多多支持，小弟在次拜谢。

驯鹿拉圣诞老人动画效果图如下

html如下:

<div style="width:400px;height:300px;background:url(yuandan.jpg) no-repeatcenter;background-size:300px 200px;">
    <canvas id="canvas" style="border:1px solid #000;display:block;margin:40px auto     0"></canvas>
</div>

javascript如下:

//定义id为canvas的元素为变量myCanvas
var myCanvas=document.getElementById("canvas");
//设myCanvas的宽是400px，高300px；
myCanvas.width="400";
myCanvas.height="300";
//定义一个在画布上绘图的环境
var ctx=myCanvas.getContext("2d");
//此为截取图片的x坐标
var shengdanP=[{x:0},{x:220},{x:440},{x:660}];
//创建一个Image对象
var shengdanImg=new Image();
//设置shengdanImg的路径
shengdanImg.src="lr.jpg";
//定义加载完图在运行程序
shengdanImg.onload=function(){
   setInterval(pao,40);
}
//设置shengdanP的初始下标为0
var index=0;
//设置动画运动的初始长度为0
var lc=0;
//设置画布的坐标
ctx.translate(290,260);
//以下是运行动画的代码
function pao(){
    //每次运行lc就加10
    lc+=10;
    //如果lc小于260，擦除shengdanImg，画布的坐标变为(-10,0)
    if(lc<260){
        ctx.clearRect(0,0,100,40);
        ctx.translate(-10,0);
    }
    //如果lc等于260，擦除shengdanImg，旋转90度，画布的坐标变为(-70,0)，再擦除shengdanImg
    else if(lc==260){
        ctx.clearRect(0,0,100,40);
        ctx.rotate(Math.PI/2);
        ctx.translate(-70,0);
        ctx.clearRect(-70,0,10,40);
    }
    //如果lc小于420，擦除hengdanImg，画布的坐标变为(-10,0)
    else if(lc<420){
         ctx.clearRect(0,0,100,40);
         ctx.translate(-10,0);
    }
    //如果lc等于420，擦除shengdanImg，旋转90度，画布的坐标变为(-70,0)，再擦除shengdanImg
    else if(lc==420){
         ctx.clearRect(0,0,100,40);
         ctx.rotate(Math.PI/2);
         ctx.translate(-70,0);
         ctx.clearRect(-70,0,100,40);
    }
    //如果lc小于680，擦除hengdanImg，画布的坐标变为(-10,0)
    else if(lc<680){
          ctx.clearRect(0,0,100,40);
          ctx.translate(-10,0);
    }
    //如果lc等于680，擦除shengdanImg，旋转90度，画布的坐标变为(-70,0)，再擦除shengdanImg
    else if(lc==680){
          ctx.clearRect(0,0,100,40);
          ctx.rotate(Math.PI/2);
          ctx.translate(-70,0);
          ctx.clearRect(-70,0,100,40);
    }
    //如果lc小于840，擦除hengdanImg，画布的坐标变为(-10,0)
    else if(lc<840){
          ctx.clearRect(0,0,100,40);
          ctx.translate(-10,0);
    }
    //如果lc等于840，擦除shengdanImg，旋转90度，画布的坐标变为(-70,0)，再擦除shengdanImg，lc变为0
     else if(lc==840){
          ctx.clearRect(0,0,100,40);
          ctx.rotate(Math.PI/2);
          ctx.translate(-70,0);
          ctx.clearRect(-70,0,100,40);
          lc=0;
     }
     //如果index等于shengdanP的长度，index变为0
     if(index==shengdanP.length){
          index=0;
     }
     //声明sx为下标为index的shengdanP下x的值
     var sx=shengdanP[index].x;
     //在画布上绘出shengdanImg，
     ctx.drawImage(shengdanImg,sx,0,220,80,0,0,100,40);
     //最后每运行一次这个函数infex就加1
     index++;
}