DIV CSS 佈局教程網

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