TML5技術(shù)正在不斷的發(fā)展和更新，越來越多的開發(fā)者也正在加入HTML5陣營，甚至在移動開發(fā)上HTML5的地位也是越來越重要了。HTML5中的大部分動畫都是通過Canvas實現(xiàn)，因為Canvas就像一塊畫布，我們可以通過調(diào)用腳本在Canvas上繪制任意形狀，甚至是制作動畫。本文就是收集了很多非常富有創(chuàng)意的一些canvas動畫特效例子，這些例子都非常適合大家學(xué)習(xí)。

1、HTML5 Canvas高空瀑布下落湖面動畫

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

2、HTML5/CSS3 3D雷達(dá)掃描動畫

之前我們分享過一款純CSS3雷達(dá)掃描模擬動畫，看起來十分炫酷。這次我們分享的另外一款雷達(dá)動畫更加讓人震撼，它是基于HTML5和CSS3實現(xiàn)，它的一大特點是3D立體的視覺效果，鼠標(biāo)點擊雷達(dá)后將會展現(xiàn)一張3D立體地圖，并且對地圖上指定的幾個地點進行坐標(biāo)詳細(xì)信息描述。

3、HTML5 Canvas 圖片粒子沙漏動畫

之前我們分享過很多款炫酷的HTML5 Canvas粒子動畫，比如這款HTML5 Canvas 多種炫酷3D粒子圖形動畫和HTML5 Canvas文字粒子動畫就都非常不錯。這次我們要給大家?guī)淼氖且豢罨贖TML5 Canvas的圖片粒子沙漏動畫，主要是將一張圖片打散成粒子，然后模擬沙漏將圖片粒子掉落下來。

4、HTML5 Canvas火焰文字動畫特效

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

5、HTML5 WebGL粒子爆炸動畫

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

6、超炫酷HTML5 Canvas蝴蝶飛舞動畫

還記得很早以前我們?yōu)榇蠹曳窒磉^一款非常炫酷的HTML5蝴蝶3D動畫，它是基于HTML5和SVG實現(xiàn)的。這次我們要再一次為大家介紹另外一款同樣也很酷的HTML5 Canvas蝴蝶飛舞動畫，蝴蝶是在Canvas上繪制而成，利用HTML5的動畫特性實現(xiàn)蝴蝶的飛舞，大家可以學(xué)習(xí)一下。

7、HTML5 Canvas 3D天體運行動畫

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

8、HTML5 Canvas 房間3D模型動畫 可讀取麥克風(fēng)和攝像頭

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

9、HTML5 Canvas 隨機色彩光束爆炸動畫特效

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

10、HTML5 Canvas粒子數(shù)字時鐘動畫

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

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

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

12、HTTML5 Canvas心電圖動畫 可多參數(shù)控制

今天要給大家分享另外一個超炫酷的HTML5 Canvas動畫，它是一個心電圖動畫效果，程序運行時就會模擬心電圖在屏幕上打印當(dāng)前心跳信息。同時動畫中帶有一些開關(guān)按鈕來控制心電圖中的各個參數(shù)，動畫相當(dāng)逼真。

13、HTML5 Canvas 夢幻樹生長動畫

今天我們要為大家分享一款基于HTML5 Canvas的動畫特效，它是一顆逐漸生長的夢幻大樹，生長過程中樹枝將會產(chǎn)生隨機的色彩，讓整一棵大樹顯得非常具有夢幻的效果。本實例利用了HTML5 Canvas的動畫技術(shù)，實現(xiàn)了漸變式動畫的特效。

14、CSS3實現(xiàn)五彩3D旋轉(zhuǎn)星球

之前我們有分享過很多純CSS3和HTML5實現(xiàn)的球體動畫，比如這款HTML5 3D球體斑點運動動畫和HTML5 Canvas 地球旋轉(zhuǎn)3D動畫都非常不錯。今天要給大家分享另外一款超炫酷的CSS3五彩3D旋轉(zhuǎn)星球，旋轉(zhuǎn)起來的視覺效果相當(dāng)震撼。

15、HTML5 Canvas閃亮的3D藍(lán)寶石動畫

幾天前，我們向大家分享過一款基于HTML5 Canvas的3D鉆石動畫，制作得十分逼真。今天我們要分享另外一個基于HTML5 Canvas的3D藍(lán)寶石動畫，我們可以通過鼠標(biāo)的拖拽來實現(xiàn)藍(lán)寶石的各個視角的觀察，并且通過鼠標(biāo)滾輪來縮放寶石的大小，同時藍(lán)寶石的表面會不時地發(fā)出閃亮的光芒，不得不說，Canvas在網(wǎng)頁繪制方面真的是無所不能。

16、HTML5 Canvas 藍(lán)色3D鉆石旋轉(zhuǎn)動畫

今天我們要在HTML5 Canvas畫布上繪制一顆高貴典雅的藍(lán)色3D鉆石，我們在Canvas畫布上通過繪制很多個不同大小的多邊形組成了一顆鉆石，然后通過CSS3的顏色漸變特性讓鉆石的表面產(chǎn)生白色發(fā)光的特效，同樣再利用CSS3的動畫屬性讓鉆石不停地旋轉(zhuǎn)，展現(xiàn)出3D的視覺效果，非常炫酷。

以上就是16個富有創(chuàng)意的HTML5 Canvas動畫特效集合，如果你對HTML5感興趣，歡迎下載源碼學(xué)習(xí)。

節(jié)主要簡單講解canvas、svg、地理定位和新語義元素

HTML 5 Canvas

canvas 元素用于在網(wǎng)頁上繪制圖形。HTML5 的 canvas 元素使JavaScript 在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域，您可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");返回一個用于在畫布上繪圖的環(huán)境，目前僅支持2d，

cxt.fillStyle="#FF0000";//染成紅色

cxt.fillRect(0,0,150,75);//fillRect 方法規(guī)定了形狀、位置和尺寸

</script>

rocessing.js

Processing.js是一個開放的編程語言，在不使用Flash或Java小程序的前提下，可以實現(xiàn)程序圖像、動畫和互動的應(yīng)用。Processing.js是輕量，易于了解掌握的理想工具，可用于可視化的數(shù)據(jù)，創(chuàng)建用戶界面和開發(fā)基于Web的游戲。

FABRIC.JS

FABRIC.JS是一款簡單而強大的JavaScript Canvas 庫，提供了互動的對象模型，同時還包含 Canvas-to-SVG 解析器。

oCanvas

oCanvas是一個JavaScript框架，用于簡化HTML5 Canvas標(biāo)簽的使用，可以利用對象來代替像素。 oCanvas 可以幫助你很容易的在 HTML5 的 Canvas 標(biāo)簽上創(chuàng)建對象，并且創(chuàng)建這些對象的動畫。

jCanvas

jCanvas 就是一個 jQuery 的繪圖插件，它封裝了一些繪制圖形的方法，只需編寫幾行代碼即可生成圖形。

RGraph

RGraph是一個使用HTML5 Canvas標(biāo)簽實現(xiàn)的圖表制作Library。利用該Library生成的Chart具有可交互性，當(dāng)鼠標(biāo)點擊或移過時會顯示相應(yīng)的信息，可以動態(tài)加載Chart或?qū)μ厥恻c進行縮放。

Two.js

Two.js 是面向現(xiàn)代 Web 瀏覽器的一個二維繪圖 API。Two.js 可以用于多個場合：SVG，Canvas 和 WebGL，旨在使平面形狀和動畫的創(chuàng)建更方便，更簡潔。

Paper.js

Paper.js是一款開源的矢量圖形腳本框架，基于 HTML5 Canvas 開發(fā)，提供清晰的場景圖、DOM和大量強大的功能用來創(chuàng)建各種向量圖和貝塞爾曲線。

EaselJS

EaselJS 是一個封裝了 HTML5 畫布(Canvas) 元素的 JavaScript 庫。

Kinetic.JS

Kinetic.JS 是一個封裝了 HTML5 Canvas的JavaScript 庫，能為桌面和移動應(yīng)用提供高性能動畫，轉(zhuǎn)場效果，節(jié)點嵌套，分層，濾鏡，緩存，事件處理以及更多功能。

Pixi.js

Pixi.js 是一個 2D webGL 渲染器，提供無縫 Canvas 回退，支持主流瀏覽器，包括桌面和移動。