驚豔!9個難以想象的 HTML5 Canvas 應用試驗

1.  HTML5 Video Destruction

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

效果演示html5

 

2.  Zen Photon Garden

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

效果演示web

 

3.  Tear-able Cloth

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

效果演示canvas

 

4.  Particles

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

效果演示動畫

 

5.  30,000 Particles

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

效果演示code

 

6.  Motion Graphic Typeface

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

效果演示

 

7.  Motion Graphic Typeface II

若是前一個演示還不夠深入,那麼這個相信可以打動你。不只是文字動畫,仍是一個使人難以置信的顏色模糊動畫。這個演示是真正的超凡脫俗。

效果演示

 

8.  Canvas Rider

HTML5 Canvas 的應用固然少不了遊戲,能夠說是網頁遊戲的將來,火狐 OS 將很快證實。這個輝煌而又簡單的自行車比賽代表,Canvas 已經準備好迎來黃金季節。

效果演示

 

9.  Gestures + Reveal.JS

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

效果演示

相關文章
相關標籤/搜索