驯鹿拉圣诞老人动画效果图如下（四周运动）

html如下:

<div style="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++;
}

 

 

标签: html5 canvas js