DIV CSS 佈局教程網

1.  <canvas id="canvas1" width="250" height="300" style="background-color:black">   
   
2.     你的浏覽器不支持 Canvas 標簽，請使用 Chrome 浏覽器 或者 Firefox 浏覽器   
3. </canvas><br/>   
4. 幀數：<input  id="txt1" type="text" value="25"/><br/>   
5. 每次移動距離：<input type="text" id="txt2" value="10"/><br/>   
6. <input type="button" value="開始" onclick="move_box()"/>   
7. <input type="button" value="暫停" onclick="stop()"/>   
8. <script type="text/Javascript">   
9.     //定時器   
10.     var interval=null;   
11.     //停止動畫   
12.     function stop(){   
13.         clearInterval(interval);   
14.     }   
15.     //===================================================================   
16.     //基本動畫   
17.     //====================================================================   
18.     function move_box(){   
19.         //停止動畫   
20.         stop();   
21.         //移動速度   
22.         var delta=parseInt(document.getElementById('txt1').value);   
23.         //每秒繪制多少次   
24.         var fps=parseInt(document.getElementById('txt2').value);   
25.         //畫布對象   
26.         var canvas=document.getElementById("canvas1")   
27.         //獲取上下文對象   
28.         var ctx = canvas.getContext("2d");   
29.         //設置顏色   
30.         ctx.fillStyle="red";   
31.         //方塊的初始位置   
32.         var x=100;var y=50;   
33.         //方塊的長度和寬度   
34.         var w=30;var h=30;   
35.         //開始動畫   
36.         interval = setInterval(function(){   
37.             //改變 y 坐標   
38.             yy=y+delta;   
39.             //上邊緣檢測   
40.             if(y<0){   
41.                 y=0;   
42.                 delta=-delta;   
43.             }   
44.             //下邊緣檢測   
45.             if((y+h)>canvas.getAttribute("height")){   
46.                 y=canvas.getAttribute("height")-h;   
47.                 delta=-delta;   
48.             }   
49.             //清空畫布   
50.             ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));   
51.             //保存狀態   
52.             ctx.save();   
53.             //移動坐標   
54.             ctx.translate(x,y);   
55.             //重新繪制   
56.             ctx.fillRect(0,0,w,h);   
57.             //恢復狀態   
58.             ctx.restore();   
59.         },1000/fps);   
60.     }   
61. </script>   

源碼下載：donghua1.rar