16個非常有趣的HTML5 Canvas影片特效集合-有解無憂

HTML5技術正在不斷的發展和更新，越來越多的開發者也正在加入HTML5陣營，甚至在移動開發上HTML5的地位也是越來越重要了，HTML5中的大部分影片都是通過Canvas實作，因為Canvas就像一塊畫布，我們可以通過呼叫腳本在Canvas上繪制任意形狀，甚至是制作影片，本文就是收集了很多非常富有創意的一些canvas影片特效例子，這些例子都非常適合大家學習，

1、HTML5 Canvas高空瀑布下落湖面影片

HTML5 Canvas是一個神奇的網頁技術，我們在Canvas畫布上可以做任何有趣的事情，今天要分享的這款瀑布影片就是利用了HTML5 Canvas的相關特性實作的，記得我們在很早以前給大家介紹過一個超逼真的HTML5瀑布影片，也是在Canvas上完成的，非常酷，今天的這個瀑布更加美妙，因為它模擬了整個瀑布落入湖面的美妙景象，但是從逼真度上來說，還是稍微有待改進，不過個人覺得已經非常不錯了，

在線演示原始碼下載

2、HTML5/CSS3 3D雷達掃描影片

之前我們分享過一款純CSS3雷達掃描模擬影片，看起來十分炫酷，這次我們分享的另外一款雷達影片更加讓人震撼，它是基于HTML5和CSS3實作，它的一大特點是3D立體的視覺效果，滑鼠點擊雷達后將會展現一張3D立體地圖，并且對地圖上指定的幾個地點進行坐標詳細資訊描述，

在線演示原始碼下載

3、HTML5 Canvas 圖片粒子沙漏影片

之前我們分享過很多款炫酷的HTML5 Canvas粒子影片，比如這款HTML5 Canvas 多種炫酷3D粒子圖形影片和HTML5 Canvas文字粒子影片就都非常不錯，這次我們要給大家帶來的是一款基于HTML5 Canvas的圖片粒子沙漏影片，主要是將一張圖片打散成粒子，然后模擬沙漏將圖片粒子掉落下來，

在線演示原始碼下載

4、HTML5 Canvas火焰文字影片特效

HTML5技術確實挺強大的，特別是Canvas畫布更是讓網頁影片變得豐富多彩，今天我們分享的是一款基于HTML5 Canvas的火焰文字影片特效，它可以讓任意文字上方冒出密集的火焰，就像這些文字在熊熊燃燒一樣，與這款火焰影片類似的還有以前分享的HTML5 Canvas幻彩火焰文字特效，

在線演示原始碼下載

5、HTML5 WebGL粒子爆炸影片

之前我們分享過幾款非常炫酷的HTML5粒子影片，比如這款HTML5像素粉碎圖片影片和HTML5 Canvas彩色像素進度條影片，都是利用了HTML5的粒子渲染特性實作，今天我們要分享另外一款基于HTML5和WebGL的粒子爆炸影片特效，效果非常令人震撼，

在線演示原始碼下載

6、超炫酷HTML5 Canvas蝴蝶飛舞影片

還記得很早以前我們為大家分享過一款非常炫酷的HTML5蝴蝶3D影片，它是基于HTML5和SVG實作的，這次我們要再一次為大家介紹另外一款同樣也很酷的HTML5 Canvas蝴蝶飛舞影片，蝴蝶是在Canvas上繪制而成，利用HTML5的影片特性實作蝴蝶的飛舞，大家可以學習一下，

在線演示原始碼下載

7、HTML5 Canvas 3D天體運行影片

今天我們要給大家分享一款基于HTML5 Canvas的3D星球天體運行影片，這里我們在Canvas畫布上繪制了一顆較大的星球，然后在大星球周圍有一圈很小的隕石區域，這些隕石會圍繞著星球不停地旋轉，而且配合黑色的背景后帶有很強烈的3D視覺效果，

在線演示原始碼下載

8、HTML5 Canvas 房間3D模型影片可讀取麥克風和攝像頭

這是一款基于HTML5 Canvas的3D房間模擬影片，房間里有電視機、沙發、書柜、燈具以及一個人物模型，這些模型都是在Canvas上繪制而成，更重要的是，這款3D影片可以利用HTML5特性讀取本地麥克風和攝像頭，這樣就可以通過攝像頭將你自己投影到電視機上，看上去挺神奇的，

在線演示原始碼下載

9、HTML5 Canvas 隨機色彩光束爆炸影片特效

今天我們要給大家分享一款非常炫酷的HTML5 Canvas光束爆炸影片特效，它就像一朵光速爆炸開一樣，影片效果非常絢麗，點擊滑鼠時，可以隨機切換光速的顏色，當然你也可以在頁面上放幾個按鈕，通過點擊按鈕來指定某一種顏色的光束，

在線演示原始碼下載

10、HTML5 Canvas粒子數字時鐘影片

還記得我們之前分享的幾款HTML5粒子影片特效嗎？比如這款HTML5文本輸入框粒子影片特效和HTML5 Canvas生成粒子效果的人物頭像，效果都非常炫酷，今天我們要給大家介紹的也是一款基于HTML5 Canvas的粒子數字時鐘影片，時鐘會讀取本地時間，并且每變化一次均會出現粒子影片效果，這款粒子數字時鐘非常適合在你的個性化博客中使用，

在線演示原始碼下載

11、HTML5 Canvas 圓形進度條顯示數字百分比

記得以前為大家分享過很多樣式各異的進度條插件，有基于jQuery的，也有基于HTML5和CSS3的，這次我們要介紹另外一款基于HTML5 Canvas的圓形進度條應用，在黑色的背景下，白色的進度條顯得格外顯眼，而且圓形中央會實時顯示當前進度的數字百分比，非常實用，

在線演示原始碼下載

12、HTTML5 Canvas心電圖影片可多引數控制

今天要給大家分享另外一個超炫酷的HTML5 Canvas影片，它是一個心電圖影片效果，程式運行時就會模擬心電圖在螢屏上列印當前心跳資訊，同時影片中帶有一些開關按鈕來控制心電圖中的各個引數，影片相當逼真，

在線演示原始碼下載

13、HTML5 Canvas 夢幻樹生長影片

今天我們要為大家分享一款基于HTML5 Canvas的影片特效，它是一顆逐漸生長的夢幻大樹，生長程序中樹枝將會產生隨機的色彩，讓整一棵大樹顯得非常具有夢幻的效果，本實體利用了HTML5 Canvas的影片技術，實作了漸變式影片的特效，

在線演示原始碼下載

14、CSS3實作五彩3D旋轉星球

之前我們有分享過很多純CSS3和HTML5實作的球體影片，比如這款HTML5 3D球體斑點運動影片和HTML5 Canvas 地球旋轉3D影片都非常不錯，今天要給大家分享另外一款超炫酷的CSS3五彩3D旋轉星球，旋轉起來的視覺效果相當震撼，

在線演示原始碼下載

15、HTML5 Canvas閃亮的3D藍寶石影片

幾天前，我們向大家分享過一款基于HTML5 Canvas的3D鉆石影片，制作得十分逼真，今天我們要分享另外一個基于HTML5 Canvas的3D藍寶石影片，我們可以通過滑鼠的拖拽來實作藍寶石的各個視角的觀察，并且通過滑鼠滾輪來縮放寶石的大小，同時藍寶石的表面會不時地發出閃亮的光芒，不得不說，Canvas在網頁繪制方面真的是無所不能，