驚艷!9個不可思議的 HTML5 Canvas 應用試驗


  HTML5 <canvas> 元素給網頁中的視覺展示帶來了革命性的變化Canvas 能夠實現各種讓人驚嘆的視覺效果和高效的動畫,在這以前是需要 Flash 支持或者 JavaScript 才能實現的。HTML5 Canvas 提供了通過 JavaScript 繪制圖形的方法,功能強大。今天這篇文章向大家展示9個讓人難以置信的 HTML5 Canvas 應用演示。

您可能感興趣的相關文章

 

1.  HTML5 Video Destruction

這是一個真正搶眼的 Canvas 演示,我必須頂禮膜拜。你會看到一個可擴展的畫布視頻,點擊視頻片爆炸,但視頻爆炸過程中繼續播放,並能夠自動回到其原來的位置。這是一個讓我們所有的人都振奮的演示。

 

2.  Zen Photon Garden

這個史詩般的 Canvas 應用演示可以在畫布上繪制活性光流,從而使用戶能夠看到他們的新線條組成的光流效果。更妙的是,這個演示可以讓您保存和加載輸出。

3.  Tear-able Cloth

這是一個流暢的模擬可撕裂布料效果的演示。你會看到,借助 Canvas 的強大繪圖和動畫功能,只需很少的代碼就能實現讓您屏息凝神的效果。

 

4.  Particles

這是演示絢麗得難以形容。此演示的動畫的顏色,位置,連接線,和不透明度,所有的動畫都很光滑....這是真的很光滑。驚嘆!

效果演示

 

5.  30,000 Particles

30K顆粒演示包含了一些非常可怕的東西:圓形(半徑),動畫爆炸和返回粒子,和鼠標監聽器,允許用戶控制爆炸。一個很好的交互性和邏輯的例子。

 

6.  Motion Graphic Typeface

這個效果太驚異了,每個字母由不同的圖像數據。我可以說的是這個動畫絕對令人興奮的,你看到文字效果取決於您的鼠標位置。

7.  Motion Graphic Typeface II

如果前一個演示還不夠深刻,那么這個相信能夠打動你不僅是文字動畫,還是一個令人難以置信的顏色模糊動畫。這個演示是真正的超凡脫俗。

8.  Canvas Rider

HTML5 Canvas 的應用當然少不了游戲,可以說是網頁游戲的未來,火狐 OS 將很快證明。這個輝煌而又簡單的自行車比賽表明,Canvas 已經准備好迎來黃金季節。

9.  Gestures + Reveal.JS

這個演示使用您的設備的攝像頭和麥克風實現基於手勢的移動立方體的數據。如果你有一台 MacBook Pro 的,你應該嘗試這一點。

效果演示
   

您可能感興趣的相關文章

 

文本鏈接:未來的Web:九個不可思議的 HTML5 Canvas 應用試驗

文章來源:夢想天空 ◆ 關注Web前端開發技術 ◆ 分享網頁設計資源


免責聲明!

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



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