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


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

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

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

   

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

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

   這樣為每個對象創建一個對象之后需要事先賦值和初始化,例如:

   

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

   通過ID獲得這個畫布就比較簡單不重復了。 以下介紹幾個特效,第一個是陰影文字:
 
   
        可以看到HTML對顏色處理的能力與SVG有的一拼的,具體的代碼如下,包括兩種文字顯示的類型

       其次關於矩形的動畫,有幾種動畫:

    

       其中形狀的出現都是動畫,只是圖片不好顯示:



    最后是事件處理函數了,由於時間倉促,開始的時候沒有設計好:

    最后,由於制作時間只有三天,整個程序比較粗糙,設計等方面還不完善,但是整體效果還挺好,老師和同學的評價還不錯。 有興趣的同學可以與我討論一下。  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM