html5 实现动画（三）
<canvas id="canvas3" width="250" height="300" style="background-color:black">
    你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
帧数：<input  id="txt4" type="text" value="10"/><br/>
速度：<input type="text" id="txt5" value="5"/><br/>
比例：<input type="text" id="txt6" value="2"/><br/>
<input type="button" value="开始" onclick="animate()"/>
<input type="button" value="暂停" onclick="stop()"/>
<script type="text/javascript">
    //定时器
    var interval=null;
    //停止动画
    function stop(){
        clearInterval(interval);
    }
    //===================================================================
    //精灵登场
    //====================================================================
    //每一帧在大图中的位置
    var frames=[];
    frames[0]=[0,4,19,19];
    frames[1]=[22,1,24,19];
    frames[2]=[49,0,18,17];
    frames[3]=[1,32,18,17];
    frames[4]=[22,33,24,19];
    frames[5]=[49,36,19,19];
    //精灵类
    function Sprite(dx,dy,delta,fps){
        this.dx=dx;
        this.dy=dy;
        this.fps=fps;
        this.delay=1000/fps;
        this.last_update=0;
        //移动速度
        this.delta=-delta;
        //帧编号
        this.index=0;
        //方向
        this.dir_left=true;
    }
    Sprite.prototype.update=function(canvas){
        //获取当前时间
        var now=(new Date()).getTime();
        if((now-this.last_update)>this.delay){
            if(this.dir_left){
                //方向朝左,只绘制0 1 2帧
                if(this.index>2)
                    this.index=0;
            }
            else{
                //方向朝右,只绘制 3 4 5 帧
                if(this.index>5)
                    this.index=3;
            }
            //取出当前帧的坐标
            this.frame=frames[this.index];
            //当前帧在大图中的位置
            this.sx=this.frame[0];
            t