canvas绘制动画效果

绘制一个笑脸，实现笑脸的左右匀速运动

html代码：

<canvas id="myCanvas" width="400px" height="400px"></canvas>

js代码：

<script type="text/javascript">
    function $(id)
    {
        return document.getElementById(id);
    }
    var i=0,j=300,t;
    function drawCirc(cxt,color,intX,intY,intR,intH,blnFill){
        cxt.beginPath();
        cxt.arc(intX,intY,intR,0,Math.PI*intH)

        if(blnFill){
            cxt.fillStyle=color;
            cxt.fill();
        }
        else{
            cxt.strokeStyle=color;
            cxt.lineWidth=2;
            cxt.stroke();
        }
        cxt.closePath();
    }
    function drawFace(cxt){
        drawCirc(cxt,‘#666‘,30,80,30,2,true);
        drawCirc(cxt,‘#fff‘,20,70,5,2,true);
        drawCirc(cxt,‘#fff‘,40,70,5,2,true);
        drawCirc(cxt,‘#fff‘,30,80,18,1,false);
    }
    function moveFace(){
        var cvs=$(‘myCanvas‘);
        var cxt=cvs.getContext(‘2d‘);
        cxt.clearRect(0,0,cvs.width,cvs.height);
        if(i<300){
            i=i+2;
            t=2;
        }
        else if(j>=0){
            j=j-2;
            t=-2;
        }
        else{
            i=0;
            j=300;
        }
        cxt.translate(t,0);
        drawFace(cxt);
    }

    window.onload=function(){
        var cvs=$(‘myCanvas‘);
        var cxt=cvs.getContext(‘2d‘);
        drawFace(cxt);
        setInterval(moveFace,100);

    };

</script>