八大瘋狂的HTML5 Canvas及WebGL動畫效果

作者：HTML5研究小組
日期：2012 年 03 月 15 日

HTML5、WebGL和JavaScript改變了長久以來的動畫製作行業。在過去的幾年中，我們想要製作卓越的網頁動畫只能使用Flash和Java Applet。而現在，使用腳本語言和渲染器在瀏覽器中實現瘋狂的動畫效果已經成為可能。究其原因，大概有以下幾點：

1. 處理器的性能越來越高。我們的電腦已經有足夠的強大的能力去渲染最為複雜的動畫效果。

2. 現在瀏覽器和web技術的不斷發展。瀏覽器如Firefox、Chrome、Safari和IE10，web技術如Canvas、SVG和WebGL。

3. 網速越來越快。一些體驗需要實時數據流和預加載資源，更好的網絡狀況能有更好的體驗。

4. 我們挑選了8個由WebGL、HTML5 Canvas和Javascript製作的絕妙效果。每一個都非常簡單但卻發人深省，瘋狂並且極具創意。

用鼠標拖拽，然後扔出去，就會粘在網頁邊緣。

使用浮點紋理和FBO來實現的動畫，由粒子組成一匹奔跑的駿馬。

用3D的方式呈現經典的2D水面效果算法。

WebGL和Three.js製作的漂亮的章魚狀的星空動畫。

HTML5 Canvas製作的效果，無數條蠕蟲根據灰度組成圖片，你還可以拖拽一張本地圖片到右側。

將紐約地鐵系統變成可以彈奏的弦樂器。

來源：HIWEBGL

高品質訓練課程供應者