html5教程：html5 实现动画（三）

<canvas id="canvas3" width="250" height="300" style="background-color:black">   
    你的浏览器不支持 <canvas>标签，请使用 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];   
            //当前帧在大图中的位置   
            thisthis.sx=this.frame[0];   
            thisthis.sy=this.frame[1];   
            thisthis.sw=this.frame[2];   
            thisthis.sh=this.frame[3];   
            //当前帧大小   
            thisthis.dw=this.frame[2];   
            thisthis.dh=this.frame[3];   
            //改变 x 坐标   
            thisthis.dx=this.dx+this.delta;   
            //左边缘检测   
            if(this.dx<0){   
                this.dx=0;   
                //转向   
                this.delta=-this.delta;   
                this.dir_left=false;   
                this.index=3;   
            }   
            //右边缘检测   
            if((this.dx+this.dw)>canvas.getAttribute("width")){   
                this.dx=canvas.getAttribute("width")-this.dw;   
                //转向   
                this.delta=-this.delta;   
                this.dir_left=true;   
                this.index=0;   
            }   
            thisthis.dy=this.dy;//y 不移动   
            this.index++;   
            this.last_update=now;   
        }   
    }   
    function animate(){   
        //停止动画   
        stop();   
        //移动速度   
        var delta=parseInt(document.getElementById('txt4').value);   
        //每秒绘制多少次   
        var fps=parseInt(document.getElementById('txt5').value);   
        //比例   
        var scale=parseInt(document.getElementById('txt6').value);   
        //画布对象   
        var canvas=document.getElementById("canvas3")   
        //获取上下文对象   
        var ctx = canvas.getContext("2d");   
        //清空画布   
        ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));   
        var img=new Image();   
        img.src="http://www.crazyfrom.com/images/2010/10/sprite.gif";   
        var sprite=new Sprite(120,150,delta,fps);   
        interval = setInterval(function(){   
            //清空画布   
            ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));   
            //更新数据   
            sprite.update(canvas);   
            //保存状态   
            ctx.save();   
            //移动坐标   
            ctx.translate(sprite.dx,sprite.dy);   
            ctx.scale(scale,scale);   
            ctx.drawImage(img,sprite.sx,sprite.sy,sprite.sw,sprite.sh,0,0,sprite.dw,sprite.dh);   
            //恢复状态   
            ctx.restore();   
        },1);   
    }   
</script>