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

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

<canvas id="canvas2" width="250" height="300" style="background-color:black">
你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器或者 FireFox 浏览器
</canvas><br/>
<input type="button" value="开始" onclick="move_box2()"/>
<input type="button" value="暂停" onclick="stop()"/>
<script type="text/javascript">
//定时器
var interval=null;
//停止动画
function stop(){
clearInterval(interval);
}
//===================================================================
//重新组织代码
//====================================================================
//方块的构造函数
function Box(color,x,y,w,h,delta){
this.color=color;
this.x=x;
this.y=y;
this.w=w;
this.h=h;
this.delta=delta;
//三十帧
this.fps=30;
//每一帧的延迟时间
this.delay=1000/this.fps;
//上一次重绘的时间
this.last_update=0;
}
//方块更新
Box.prototype.update=function(canvas){
//获取当前时间
var now=(new Date()).getTime();
//如果达到了延迟时间，则更新数据
if((now-this.last_update)>this.delay){
//改变 y 坐标
thisthis.y=this.y+this.delta;
//上边缘检测
if(this.y<0){
this.y=0;
this.delta=-this.delta;
}
//下边缘检测
if((this.y+this.h)>canvas.getAttribute("height")){
this.y=canvas.getAttribute("height")-this.h;
this.delta=-this.delta;
}
//记下最新一次绘制时间
this.last_update=now;
}
}
function move_box2(){
//停止动画
stop();
//画布对象
var canvas=document.getElementById("canvas2")
//获取上下文对象
var ctx = canvas.getContext("2d");
//清空画布
ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
//创建多个方块对象
var boxes=[];
boxes[0]= new Box("red",3,2,10,35,2,10);//速度10
boxes[1]= new Box("blue",60,28,44,15,5);//速度20
boxes[2]= new Box("green",130,200,23,18,10);//速度30
boxes[3]= new Box("pink",200,150,35,10,20);//速度40
//开始动画绘制
interval = setInterval(function(){
for(var i=0;i<boxes.length;i++){
//取出一个方块
var box=boxes[i];
//清空这个方块
ctx.clearRect(box.x,box.y,box.w,box.h);
//更新数据
box.update(canvas);
//保存状态
ctx.save();
//设置颜色
ctx.fillStyle=box.color;
//移动坐标
ctx.translate(box.x,box.y);
//重新绘制
ctx.fillRect(0,0,box.w,box.h);
//恢复状态
ctx.restore();
}
},1);//尽可能快的循环
}
</script>

源码下载：donghua2.rar