簡單酷炫的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++;
}