前端特效demo | 值得收藏的6個 HTML5 Canvas 實用案例

HTML5 動畫在Canvas 上獲得了充分的發揮，咱們 VIP 視頻也分享過不少相關的動畫特效製做視頻，此次給你們帶來 6 款超炫酷的HTML5 canvas 動畫的 demo，一塊兒來看看吧~

文內附有時鐘效果代碼 demo 下載地址，感興趣的小夥伴們能夠收藏一下。
1

超絢麗的 HTML5 地圖分佈動畫

這是一款基於 HTML5 的地圖應用，但它不一樣的地方在於它主要是在地圖上實現分佈動畫，能夠利用這款插件實現各個地區之間的客流流向，給人很是直觀的數據展示。
2

鼠標滑過粒子擠壓動畫

粒子動畫一直是 HTML5 Canvas 動畫中比較常見的一種，不少開發者也比較喜歡作這一類的動畫特效。本案例基於 HTML5 Canvas 的鼠標滑過粒子擠壓動畫，頁面上有不少粒子點組成一款畫布，當你將鼠標滑過這塊畫布時，粒子之間便相互擠壓，讓你的鼠標沒法觸碰這些粒子點。

3

模擬飛機航班線路動畫

一款基於 HTML5 Canvas 的飛機航班線路模擬動畫，它模擬了許多航班在不一樣目的地的起飛降落數量。

4

發光的流體粒子動畫

一個頗有特色的 HTML5 Canvas 粒子動畫，它既能夠看做是流體動畫，又能夠看做是粒子動畫，同時在黑色背景的陪襯下，流體粒子還會出現發光的動畫特效。

4

3D 跳動 Loading 加載動畫
(可調節參數)

這是一款基於 HTML5 Canvas 的 3D 跳動 Loading 加載動畫，它的另外一個特色是能夠動態調節動畫參數。

6

中國地圖 可展開地級市子地圖

一款值得收藏的 HTML5 Canvas 中國地圖插件，它的特色是不只能夠顯示全國地圖，並且點擊某個省份的地塊時，能夠切換到對應省的地級市地圖，對那些選擇地區的應用來講，這款插件就顯得很是實用。

來源：https://www.html5tricks.com/

做者：html5tricks