<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 坐标
this.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>
分享到:
相关推荐
html5实现的动画小人
html实现花瓣下落动画
HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花...
这次我们要来分享一款很酷的HTML5动画,是一个可以旋转的大风车动画效果,回顾一下利用HTML5实现的旋转动画,我们可以看HTML5/CSS3实现3D旋转陀螺动画,它们的实现都是利用CSS3的transform:rotate属性,这款大风车...
前端web开发,情人节浪漫专属,表白源码。利用jquery+html5实现
HTML5 SVG实现可爱的小狗和狐狸动画 HTML5 SVG实现可爱的小狗和狐狸动画 HTML5 SVG实现可爱的小狗和狐狸动画
flash做的资源,把效果导成了图片,JavaScript+html5实现的动画效果,
html5实现的页面滚动图片动画加载特效源码
html5实现腾讯QQ登录界面背景动画特效(QQ背景动态)+js,可以有效的学习html标签,制作出所见即所得的东西。高大上的背景!
HTML5实现DNA螺旋动画效果演示.zip
使用html5与css3实现的动画小车页面,效果不错
这是一款基于HTML5 Canvas实现的雷达扫描动画特效源码,canvas是HTML5特有的画布工具,我们可以在canvas上绘制任意元素,包括3D元素。这款雷达扫描动画就是利用了canvas的灵活特性,利用js在canvas上绘制这些美丽的...
特效简介: jQuery Html5实现唯美表白动画代码,动画效果很棒,程序员表白必备! 注:线上预览不了,请下载至本地预览
html5结合Canvas实现的树叶飘落动画特效源码.zip
HTML5实现圣诞雪人动画代码基于HTML5、CSS3、prefixfree.min.js制作,雪人跳跃动画效果,红色网页背景,雪人戴着黑色帽子,蓝色围巾。
HTML5实现3D效果实景地图,是一款3D实景地图,截取了实景的房屋大厦,并且可以旋转展示,具有非常强的立体效果!
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
用HTML,JavaScript实现的一个简单的跳舞的机器人动画特效,有兴趣的可以看看 ,非常有意思