HTML5入门

html5 实现动画(二)

字号+ 作者: 来源: 2014-11-16 20:49 我要评论( )

XML/HTML Code 复制内容到剪贴板 canvas id = canvas2 width = 250 height = 300 style = background-color:black 你的浏览器不支持Canvas标签,请使用Chrome浏览器或者FireFox浏览器 / canvas br / input type = button value

XML/HTML Code复制内容到剪贴板
  1.  <canvas id="canvas2" width="250" height="300" style="background-color:black">   
  2.     你的浏览器不支持 Canvas 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器   
  3. </canvas><br/>   
  4. <input type="button" value="开始" onclick="move_box2()"/>   
  5. <input type="button" value="暂停" onclick="stop()"/>   
  6. <script type="text/javascript">   
  7.     //定时器   
  8.     var interval=null;   
  9.     //停止动画   
  10.     function stop(){   
  11.         clearInterval(interval);   
  12.     }   
  13.     //===================================================================   
  14.     //重新组织代码   
  15.     //====================================================================   
  16.     //方块的构造函数   
  17.     function Box(color,x,y,w,h,delta){   
  18.         this.color=color;   
  19.         this.x=x;   
  20.         this.y=y;   
  21.         this.w=w;   
  22.         this.h=h;   
  23.         this.delta=delta;   
  24.         //三十帧   
  25.         this.fps=30;   
  26.         //每一帧的延迟时间   
  27.         this.delay=1000/this.fps;   
  28.         //上一次重绘的时间   
  29.         this.last_update=0;   
  30.     }   
  31.     //方块更新   
  32.     Box.prototype.update=function(canvas){   
  33.         //获取当前时间   
  34.         var now=(new Date()).getTime();   
  35.         //如果达到了延迟时间,则更新数据   
  36.         if((now-this.last_update)>this.delay){   
  37.             //改变 y 坐标   
  38.             thisthis.y=this.y+this.delta;   
  39.             //上边缘检测   
  40.             if(this.y<0){   
  41.                 this.y=0;   
  42.                 this.delta=-this.delta;   
  43.             }   
  44.             //下边缘检测   
  45.             if((this.y+this.h)>canvas.getAttribute("height")){   
  46.                 this.y=canvas.getAttribute("height")-this.h;   
  47.                 this.delta=-this.delta;   
  48.             }   
  49.             //记下最新一次绘制时间   
  50.             this.last_update=now;   
  51.         }   
  52.     }   
  53.     function move_box2(){   
  54.         //停止动画   
  55.         stop();   
  56.         //画布对象   
  57.         var canvas=document.getElementById("canvas2")   
  58.         //获取上下文对象   
  59.         var ctx = canvas.getContext("2d");   
  60.         //清空画布   
  61.         ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));   
  62.         //创建多个方块对象   
  63.         var boxes=[];   
  64.         boxes[0]= new Box("red",3,2,10,35,2,10);//速度10   
  65.         boxes[1]= new Box("blue",60,28,44,15,5);//速度20   
  66.         boxes[2]= new Box("green",130,200,23,18,10);//速度30   
  67.         boxes[3]= new Box("pink",200,150,35,10,20);//速度40   
  68.         //开始动画绘制   
  69.         interval = setInterval(function(){   
  70.             for(var i=0;i<boxes.length;i++){   
  71.                 //取出一个方块   
  72.                 var box=boxes[i];   
  73.                 //清空这个方块   
  74.                 ctx.clearRect(box.x,box.y,box.w,box.h);   
  75.                 //更新数据   
  76.                 box.update(canvas);   
  77.                 //保存状态   
  78.                 ctx.save();   
  79.                 //设置颜色   
  80.                 ctx.fillStyle=box.color;   
  81.                 //移动坐标   
  82.                 ctx.translate(box.x,box.y);   
  83.                 //重新绘制   
  84.                 ctx.fillRect(0,0,box.w,box.h);   
  85.                 //恢复状态   
  86.                 ctx.restore();   
  87.             }   
  88.         },1);//尽可能快的循环   
  89.     }   
  90. </script>   

 源码下载:donghua2.rar 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5 实现动画(三)

    html5 实现动画(三)

    2014-11-16 20:49

  • html5 实现动画(一)

    html5 实现动画(一)

    2014-11-16 20:49

  • 15 个 HTML5 Canvas 应用欣赏

    15 个 HTML5 Canvas 应用欣赏

    2014-11-16 20:49

网友点评