DIV CSS 佈局教程網

1. <canvas id="canvas3" width="250" height="300" style="background-color:black">   
2.     你的浏覽器不支持 <canvas>標簽，請使用 Chrome 浏覽器 或者 Firefox 浏覽器   
3. </canvas><br/>   
4. 幀數：<input  id="txt4" type="text" value="10"/><br/>   
5. 速度：<input type="text" id="txt5" value="5"/><br/>   
6. 比例：<input type="text" id="txt6" value="2"/><br/>   
7. <input type="button" value="開始" onclick="animate()"/>   
8. <input type="button" value="暫停" onclick="stop()"/>   
9. <script type="text/Javascript">   
10.     //定時器   
11.     var interval=null;   
12.     //停止動畫   
13.     function stop(){   
14.         clearInterval(interval);   
15.     }   
16.     //===================================================================   
17.     //精靈登場   
18.     //====================================================================   
19.     //每一幀在大圖中的位置   
20.     var frames=[];   
21.     frames[0]=[0,4,19,19];   
22.     frames[1]=[22,1,24,19];   
23.     frames[2]=[49,0,18,17];   
24.     frames[3]=[1,32,18,17];   
25.     frames[4]=[22,33,24,19];   
26.     frames[5]=[49,36,19,19];   
27.     //精靈類   
28.     function Sprite(dx,dy,delta,fps){   
29.         this.dx=dx;   
30.         this.dy=dy;   
31.         this.fps=fps;   
32.         this.delay=1000/fps;   
33.         this.last_update=0;   
34.         //移動速度   
35.         this.delta=-delta;   
36.         //幀編號   
37.         this.index=0;   
38.         //方向   
39.         this.dir_left=true;   
40.     }   
41.     Sprite.prototype.update=function(canvas){   
42.         //獲取當前時間   
43.         var now=(new Date()).getTime();   
44.         if((now-this.last_update)>this.delay){   
45.             if(this.dir_left){   
46.                 //方向朝左,只繪制0 1 2幀   
47.                 if(this.index>2)   
48.                     this.index=0;   
49.             }   
50.             else{   
51.                 //方向朝右,只繪制 3 4 5 幀   
52.                 if(this.index>5)   
53.                     this.index=3;   
54.             }   
55.             //取出當前幀的坐標   
56.             this.frame=frames[this.index];   
57.             //當前幀在大圖中的位置   
58.             thisthis.sx=this.frame[0];   
59.             thisthis.sy=this.frame[1];   
60.             thisthis.sw=this.frame[2];   
61.             thisthis.sh=this.frame[3];   
62.             //當前幀大小   
63.             thisthis.dw=this.frame[2];   
64.             thisthis.dh=this.frame[3];   
65.             //改變 x 坐標   
66.             thisthis.dx=this.dx+this.delta;   
67.             //左邊緣檢測   
68.             if(this.dx<0){   
69.                 this.dx=0;   
70.                 //轉向   
71.                 this.delta=-this.delta;   
72.                 this.dir_left=false;   
73.                 this.index=3;   
74.             }   
75.             //右邊緣檢測   
76.             if((this.dx+this.dw)>canvas.getAttribute("width")){   
77.                 this.dx=canvas.getAttribute("width")-this.dw;   
78.                 //轉向   
79.                 this.delta=-this.delta;   
80.                 this.dir_left=true;   
81.                 this.index=0;   
82.             }   
83.             thisthis.dy=this.dy;//y 不移動   
84.             this.index++;   
85.             this.last_update=now;   
86.         }   
87.     }   
88.     function animate(){   
89.         //停止動畫   
90.         stop();   
91.         //移動速度   
92.         var delta=parseInt(document.getElementById('txt4').value);   
93.         //每秒繪制多少次   
94.         var fps=parseInt(document.getElementById('txt5').value);   
95.         //比例   
96.         var scale=parseInt(document.getElementById('txt6').value);   
97.         //畫布對象   
98.         var canvas=document.getElementById("canvas3")   
99.         //獲取上下文對象   
100.         var ctx = canvas.getContext("2d");   
101.         //清空畫布   
102.         ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));   
103.         var img=new Image();   
104.         img.src="http://www.crazyfrom.com/images/2010/10/sprite.gif";   
105.         var sprite=new Sprite(120,150,delta,fps);   
106.         interval = setInterval(function(){   
107.             //清空畫布   
108.             ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));   
109.             //更新數據   
110.             sprite.update(canvas);   
111.             //保存狀態   
112.             ctx.save();   
113.             //移動坐標   
114.             ctx.translate(sprite.dx,sprite.dy);   
115.             ctx.scale(scale,scale);   
116.             ctx.drawImage(img,sprite.sx,sprite.sy,sprite.sw,sprite.sh,0,0,sprite.dw,sprite.dh);   
117.             //恢復狀態   
118.             ctx.restore();   
119.         },1);   
120.     }   
121. </script>   

源碼下載：donghua3.rar