16個富有創(chuàng)意的HTML5 Canvas動畫特效集合

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

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

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

2、HTML5/CSS3 3D雷達掃描動畫

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

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)蝴蝶的飛舞，大家可以學習一下。

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

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

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

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

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

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

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

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

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

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

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

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

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)起來的視覺效果相當震撼。

15、HTML5 Canvas閃亮的3D藍寶石動畫

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

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

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

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

迎來到【暢哥聊技術(shù)】前端圖形學相關(guān)技術(shù)文章，更多精彩內(nèi)容持續(xù)更新中,敬請關(guān)注。

在傳統(tǒng)的Dom操作中，我們要給一個元素去綁定一個事件是特別容易的事情，那么在canvas圖形學中，我們無法直接給一個圖形去添加一些鼠標事件，原因就是因為圖形和dom元素有著本質(zhì)的區(qū)別。

拿我們一用在用的小球為例。我們無法直接給小球綁定任何的鼠標事件，而其實在我們的實際項目開發(fā)過程中，有很多情況是需要我們通過鼠標去操作圖形的，比如拖拽。

所以我們的做法是直接給畫布元素（Canvas標簽就是一個dom元素）去添加鼠標事件，然后再去映射到對應的圖形上即可。

主要有兩種方法去實現(xiàn)，下面我分別舉例。

鼠標到圓心的距離和圓的半徑的比較

從上面的圖中我們可以看到，如果鼠標點落在了紅色小球的位置，則小球沒有被點擊到，相反，如果是鼠標點落在了白色小圓上，那么小球則是被點擊到了。

換成程序語言就是：如果鼠標和小球中心點的距離大于小球的半徑，則沒有點擊到，否則小球被點擊到了。

小球的半徑(ball.r)我們知道了，現(xiàn)在我們要計算出鼠標點和小球圓心的距離。這個距離要怎么求呢？

這個應該很容易想到，數(shù)學中的直角三角形滿足勾股定理。a*a + b*b = c*c，現(xiàn)在我們可以很容易計算出a,b

核心代碼；

canvas.addEventListener('click',e=>{
		var x = e.pageX - canvas.offsetLeft;
		var y = e.pageY - canvas.offsetTop;
		var a = x - ball.x;
		var b = y - ball.y;
		var c = Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
		if(c<=ball.r){
			alert('點中了')
		}else{
			alert('沒有點中')
		}
})

這種方式原理很簡單，就是判斷兩個點之間的距離和半徑相比即可。這種方法只適合用于圓形的判斷，如果是其它的圖形，這種方法就行不通了。

那么接下來，我們換一種方式去實現(xiàn)，canvas給我們提供了原生的Api：

context.isPointInPath(x,y)

從字面上很好理解，就是判斷一個點坐標（x,y）是否在某個路徑內(nèi)。

看似比我們第一種實現(xiàn)方法要簡單得很多，接下來我們來改造一下我們的小球類。

我們在render方法中添加兩個參數(shù)，pointX,pointY,然后判斷這兩個坐標對應的點是否在小球內(nèi)，并將結(jié)果掛載到當前小球類的對象上面。

核心代碼：

render(context,pointX,pointY) {
		let { x, y, r, scaleX, scaleY, fillStyle, strokeStyle, opacity} = this;
		context.save();
		context.strokeStyle = strokeStyle;
		context.fillStyle = fillStyle;
		context.translate(x, y);
		context.globalAlpha = opacity;
		context.scale(scaleX, scaleY);
		context.beginPath();
		context.arc(0, 0, r, 0, Math.PI * 2, false);

		if(pointX && pointY){

			this.isPointInPath = context.isPointInPath(pointX,pointY);

		}

		context.fill();
		context.stroke();
		context.restore();
		return this;
	}

實現(xiàn)效果：

分別點擊兩個小球，可分別觸發(fā)對應的事件

點擊事件的調(diào)用方法

完整的小球類的代碼：

小球類

總結(jié)：

這里不僅是通過鼠標的點擊事件，像mouseover mouseout些事件都是一樣的道理，我們獲取鼠標事件，其實是要獲取到一個點坐標。
數(shù)學知識，通過勾股定理去計算兩點之間的距離。
大家可能有發(fā)現(xiàn)，我寫的小球類從一開始簡單的繪制，到后面給小球添加新的屬性和方法內(nèi)部的改造。這些都不是一次性就能寫完整的，而是隨著項目的不斷迭代,我們再去不斷的完善我們的代碼程序。

以上是今天所有的分享內(nèi)容。喜歡的請點贊關(guān)注，不喜歡的解散。。。

這里是【暢哥聊技術(shù)】前端圖形學相關(guān)技術(shù)文章，更多精彩內(nèi)容持續(xù)更新中。。。

未完待續(xù)。。。

記得在過去的Web前端開發(fā)中，如果你需要繪圖或者生成相關(guān)圖形的話，使用Flash可能是你唯一或者說最強大的實現(xiàn)方式，而在近些年的技術(shù)熱點HTML5標準中，（畫布）能夠更加方便的幫助你實現(xiàn)2D繪制圖形圖像及其各種動畫效果功能。

首先我們先來了解一下什么是HTML Canvas？

我們可以在HTML中使用屬性width和height來定義Canvas。但是實現(xiàn)Canvas的相關(guān)功能主要還依賴于Javascript實現(xiàn)，即HTML5 Canvas API。我們使用javascript來訪問和控制Canvas相關(guān)的區(qū)域，比如調(diào)用相關(guān)繪圖的方法，用來動態(tài)的生成需要的動畫或者圖形。

接下來我們來看看canvas的特性：

互動性：Canvas支持互動，可以很好的響應用戶的操作，我們可以通過Javascript來監(jiān)鍵盤，鼠標，及其觸摸設(shè)備相關(guān)事件。

動畫：任何被canvas繪制的圖形都可以添加動畫，簡單的彈跳球或者復雜的HTML5游戲都可以實現(xiàn)

靈活性：開發(fā)人員可以使用Canvas來繪制任何的內(nèi)容，比如，直線，圖形，文字，圖片等，可以包含動畫或者不包含。同時你可以添加音頻或者視頻瀏覽器支持：幾乎所有的現(xiàn)代瀏覽器都支持，并且被廣泛的各種設(shè)備支持，例如，桌面，平板，智能手機等等。

流行度：canvas目前很流行，很多的開發(fā)人員都使用它來開發(fā)類似游戲或者繪圖類應用

web標準：只需要有瀏覽器就可以運行，而非flash或者silverlight，需要安裝相關(guān)的插件

開發(fā)一次，任何瀏覽器都可以運行（當然，不包括老式瀏覽器）

可以使用免費擁有大量的開發(fā)工具及其類庫。

使用HTML5 Canvas我們能開發(fā)那些相關(guān)產(chǎn)品或者應用呢？

1 可視化數(shù)據(jù)：各類統(tǒng)計圖表，比如:百度的echart

2 場景秀：用Canvas實現(xiàn)動態(tài)的廣告效果能夠非常融洽的跨平臺運行。如:手機中微產(chǎn)品.在移動端兼容性很好。

3 游戲：canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas成為HTML5小游戲開發(fā)首選。現(xiàn)階段h5做游戲,營業(yè)方式不是很明確. 25 超棒的 HTML5 Canvas 游戲。

4 其他可嵌入網(wǎng)站的內(nèi)容 (多用于活動頁面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。

5 趨勢=> 模擬器：無論從視覺效果還是核心功能方面來說，模擬器產(chǎn)品可以完全由JavaScript來實現(xiàn)。模擬真實硬件環(huán)境,如移動端各種類型手機.

6 趨勢=> 遠程計算機控制： Canvas可以讓開發(fā)者更好地實現(xiàn)基于Web的數(shù)據(jù)傳輸，構(gòu)建一個完美的可視化控制界面。

7 趨勢=> 圖形編輯器： Photoshop圖形編輯器將能夠100%基于Web實現(xiàn)。

如何使用HTML5 Canvas？

使用HTML5 canvas其實非常簡單，每一個canvas都擁有一個上下文（context）。使用它你可以來調(diào)用相關(guān)的畫布方法。

<p>您的瀏覽器不支持HTML5 Canvas</p>

</canvas>

以上代碼我們在HTML中添加了一個canvas標簽，如果瀏覽器不支持canvas，會顯示<p>標簽的內(nèi)容，當然，如果你需要支持老式瀏覽器你也可以使用flash或者其它方法來做一個替代的解決方案。

var canvas = document.getElementById('mycanvas'),

context = canvas.getContext('2d');

以上代碼我們通過canvas取到2D的context。

在HTML5 Canvas的2D結(jié)構(gòu)中，坐標（0,0）在左上方，這和傳統(tǒng)的坐標不太一樣。大家需要注意一下，如下圖所示：

下面來說一下canvas的API：

canvas的主要屬性和方法：

save():保存當前環(huán)境的狀態(tài)

restore():返回之前保存過的路徑狀態(tài)和屬性

createEvent()

getContext():返回一個對象，指出訪問繪圖功能必要的API

toDateURL():返回canvas圖像的URL

顏色、樣式和陰影屬性和方法：

fillStyle:設(shè)置或返回用于填充繪畫的顏色、漸變或模式

strokeStyle:設(shè)置或返回用于筆觸的顏色、漸變或模式

shadowColor:設(shè)置或返回用于陰影的顏色

shadowBlur:設(shè)置或返回用于陰影的模糊級別

shadowOffsetX:設(shè)置或返回陰影距形狀的水平距離

shadowOffsetY:設(shè)置或返回陰影距形狀的垂直距離

createLinearGradient():創(chuàng)建線性漸變（用在畫布內(nèi)容上）

createPattern():在指定的方向上重復指定的元素

createRadialGradient():創(chuàng)建放射狀/環(huán)形的漸變（用在畫布內(nèi)容上）

addColorStop():規(guī)定漸變對象中的顏色和停止位置

線條樣式屬性和方法

lineCap:設(shè)置或返回線條的結(jié)束端點樣式

lineJoin:設(shè)置或返回兩條線相交時，所創(chuàng)建的拐角類型

lineWidth:設(shè)置或返回當前的線段寬度

miterLimit:設(shè)置或返回最大斜接長度

Canvas的API-路徑方法

fill():填充當前繪圖(路徑)

stroke():繪制已定義的路徑

beginPath():起始一條路徑，或重置當前路徑

moveTo():把路徑移動到畫布中的指定點，不創(chuàng)建線條

closePath():創(chuàng)建從當前點回到起始點的路徑

lineTo():添加一個新點，創(chuàng)建從該點到最后指定點的線條

clip():從原始畫布剪切任意形狀和尺寸的區(qū)域

quadraticCurveTo():創(chuàng)建二次貝塞爾曲線

bezierCurveTo():創(chuàng)建三次貝塞爾曲線

arc():創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）

arcTo():創(chuàng)建兩切線之間的弧/曲線

isPointInPath():如果指定的點位于當前路徑中，返回布爾值

Canvas的API-轉(zhuǎn)換方法

scale():縮放當前繪圖至更大或更小

rotate():旋轉(zhuǎn)當前繪圖

translate():重新映射畫布上的（0，0）位置

transform():替換繪圖的當前轉(zhuǎn)換矩陣

setTransform():將當前轉(zhuǎn)換重置為單位矩陣，然后運行transform（）

Canvas的API-文本屬性和方法

font:設(shè)置或返回文本內(nèi)容的當前字體屬性

textAlign:設(shè)置或返回文本內(nèi)容的當前對齊方式

textBaseline:設(shè)置或返回在繪制文本時使用的的當前文本基線

fillText():在畫布上繪制"被填充的"文本

strokeText():在畫布上繪制文本（無填充）

measureText():返回包含指定文本寬度的對象

Canvas的API-圖像繪制方法

drawImage():向畫布上繪制圖像、畫布或視頻

Canvas的API-像素操作方法和屬性

width:返回ImageData對象的寬度

height:返回ImageData對象的高度

data:返回一個對象，其包含指定的ImageData對象的圖像數(shù)據(jù)

createImageData():創(chuàng)建新的、空白的I馬哥Data對象

getImageData():返回ImageData對象，該對象為畫布上指定的矩形復制像素數(shù)據(jù)

putImageData():把圖像數(shù)據(jù)（從指定的ImageData對象）放回畫布上

Canvas的API-圖像合成屬性

globalAlpha:設(shè)置或返回繪圖的當前alpha或透明值

globalCompositeOperation:設(shè)置或返回新圖像如何繪制到已有的圖像上

快速高效的創(chuàng)建HTML5畫布圖形？

直接使用Canvas來繪制圖形相對來說比較乏味并且麻煩，所以在現(xiàn)代的HTML5 Canvas中我們使用一些現(xiàn)成的第三方類庫幫助我們多快好省的實現(xiàn)圖形繪制的功能：Echart.js

在線咨詢

上一篇：小鄭詳解JavaScript的運行機制
下一篇：基礎(chǔ)面試題07:HTML5的離線儲存怎么使用,解釋一下其工作原理？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商