转：html5 sprite

andyhu00

2011-12-07

from:http://www.nonb.cn/demo/html5-sprite/sprite.html

<!DOCTYPE html>
<head>
	<meta charset="utf-8"> 
		<script type="text/javascript">
//@author: Fzxa
//@create: 20110920
//@blog: nonb.cn

//定时器
var interval=null;
//每一帧在大图中的位置
var frames=[];
//向左
frames[0]=[30,4,70,96];
frames[1]=[116,0,72,100];
frames[2]=[209,3,64,97];
frames[3]=[297,1,63,99];
frames[4]=[381,2,66,98];
frames[5]=[460,3,63,97];
//向右 
frames[6]=[30,106,63,97];
frames[7]=[106,105,66,98];
frames[8]=[192,101,64,103];
frames[9]=[208,106,64,97];
frames[10]=[366,103,71,100];
frames[11]=[453,107,70,96];

//精灵类
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 3 4 5帧
            if(this.index>5)
                this.index=0;
        }
        else{
            if(this.index>11)
                this.index=6;
        }
        //取出当前帧的坐标
        this.frame=frames[this.index];

        //当前帧在大图中的位置
        this.sx=this.frame[0];
        this.sy=this.frame[1];
        this.sw=this.frame[2];
        this.sh=this.frame[3];

        //当前帧大小
        this.dw=this.frame[2];
        this.dh=this.frame[3];

        //改变 x 坐标
        this.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;
        }         
        this.dy=this.dy;//y 不移动


        this.index++;
        this.last_update=now;
    }
}

function animate(){
    //停止动画
    stop();
    //移动速度
    var delta=10;
    //每秒绘制多少次
    var fps=8;
    //比例
    var scale=1;

    //画布对象
    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="./sprite_2.gif";

    var sprite=new Sprite(120,200,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>
</head>
<body>
	<center>
	<canvas id="canvas3" width="250" height="300" style="background-color:#fff;border:1px solid #000">
	    你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
	</canvas><br/>

	<input type="button" value="开始" onclick="animate()"/>

	<br />最好用chrome观看demo,你懂的...<br />
	By <a href="http://www.nonb.cn">写点寂寞</a> @Author:Fzxa

	</center>
</body>
</html>

雪碧 html5