html5 实现动画（三）_H5之家 - 中国HTML5教程资源分享第一站

XML/HTML Code复制内容到剪贴板

<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>

源码下载：donghua3.rar