用HTML5+Javascript在浏覽器上制作PPT

Html5最近在IT領域有些熱，在Google、Adobe與Microsoft等大公司間掀起了一些風波。關於HTML5之熱，有可能只是噱頭，但也有可能真是一次Web的技術革命。它或許真的能讓網頁回歸到桌面應用程序，而浏覽器是平台。

對於將來的互聯網，不知道大家有沒有這種設想：網頁好比現在桌面上的應用程序，浏覽器就像windows等操作系統，那麼將來的PC機制需要浏覽器和存儲設備等基礎應用程序和設備，PC用戶可以通過網頁像服務器請求下載相應的應用程序甚至直接在服務器端運行再返回結果到客戶端。

本人最近需要做一個presentation,關於HTML5的新特性和應用前景的。本來打算用Powerpoint，但是為了展現HTML5實際的圖形界面能力，我們組決定直接用HTML5寫一個應用程序在浏覽器中運行，實現PPT的效果，由於制作的時間只有三天，總共也有五六百行代碼，所以做的比較粗超了，雖然不如Powerpoint專業和強大，但是作為自己團隊的第一次嘗試還是小有成就感的，也希望大家指正。以下可以粗略的講解一下。這是程序的主界面。

演示時基本與PPT一致，通過按方向鍵控制內容的顯示。其中左邊用於顯示文本內容，右邊Frame用於顯示圖片、游戲、超鏈接等輔助性內容，其中演示過程也包括一些特效，如逐漸顯示、文字陰影、顏色漸變等等。

對於每個即將顯示的內容，可以創建一個對象：

1. function UNITE()  
2. {  
3.   this.type=-1; //0表示文本，1表示矩形,2表示將要表演動畫，3表示移去節點，4表示圓   
4.   this.rx=-1;  
5.   this.ry=-1;  
6.   this.r=-1;  
7.   this.rw=-1;  
8.   this.rh=-1;  
9.   this.style1="";  
10.   this.style2="";  
11.   this.rflag=1;//表示舉行的類型.默認的時候是1類型   
12.   this.tx=-1;  
13.   this.ty=-1;  
14.   this.tstyle="";  
15.   this.tfont="";  
16.   this.tvalue="";  
17.   this.tflag=1;//1表示需要延時，0表示不需要延時   
18.   this.url="";  
19. }

這樣為每個對象創建一個對象之後需要事先賦值和初始化，例如：

1. var My=new Array();  
2. function CreatePage1()  
3. {  
4.    My[0]=new UNITE();  
5.    My[0].type=0; My[0].tx=50;My[0].ty=50;  
6.    My[0].tstyle="blue";My[0].tfont="50px 隸書";  
7.    My[0].tflag=0; My[0].tvalue="HTML5+CSS3+Javascript";  
8. }

這是腳本，演示區域需要一個<canvas>標簽創建一個畫布：

<canvas id="first" width=600 height=600 style="border:1px solid black;"></canvas>

通過ID獲得這個畫布就比較簡單不重復了。 以下介紹幾個特效，第一個是陰影文字：