hart.js是一個開源、簡單而靈活、使用HTML5的canvas元素的JavaScript圖表，支持柱型和線型混合顯示提供清晰的視覺區別，在所有現代瀏覽器（IE9+）提供強大的渲染性能，有8種不同的圖表類型，每一種都是可定制的；當瀏覽器大小發生改變時他會重新繪制圖表。

1、下載及初始化

https://github.com/chartjs/Chart.js

在github下載后，你必須構建Chart.js生成dist文件。然后在頁面中引入生成的dist/Chart.js文件；或者直接引入托管平臺上的Chart.js文件。

然后在頁面body中創建一個<canvas>元素。

最后，以上準備好了就能創建一個圖表了，在頁面中添加一個腳本。

npm安裝命令：npm install chart.js --save

bower安裝命令：bower install chart.js --save

2、基本演示

①柱形圖表

②線形圖表

③面積圖表

④餅形圖表

⑤柱、線混合

⑥散點圖

⑦網格線圖表

官方網站：

http://www.chartjs.org/

Chart.js只有一些基礎的圖表，簡單的可視化數據展示，同時能夠動態改變數據、更新顏色、添加數據等，能夠重繪圖表調整到完美規模的粒度。內含多種鼠標事件，提供許多選項來配置動畫的樣子。Chart.js適合只需要簡單圖表的項目，如果需要更復雜的顯示，可以選擇echarts或Highcharts圖表庫。

有哪里寫得不好的地方請大家提出來，請輕噴，謝謝。 同時有什么與編程相關的好東西可以推舉給我，再次感謝！

們分享過很多漂亮的HTML5動畫，包括CSS3菜單、HTML5 Canvas動畫等。今天我們精選了9款非常不錯的超炫HTML5最新動畫，一起來看看。

1、HTML5可愛的404頁面動畫 很逗的機器人

很久以前我在網上看到一篇帖子，是專門分享創意404頁面的，很可惜我已經找不到了。但是今天我找到一款利用HTML5實現的404機器人動畫，當你進入該404頁面時，就會出現一個機器人在跳舞，非常可愛。這個機器人跳舞的動作是利用HTML5和CSS3的動畫屬性實現的。

2、HTML5/CSS3鼠標滑過抖動圖標 非常可愛

這是一款簡單的利用CSS3實現的圖標抖動特效，首先我們精選了幾款常用而且漂亮的圖標，并在圖標下方寫有描述性的文字。當我們把鼠標滑過圖標時，圖標即會不停的抖動，像是在告訴用戶“點我吧”，這個功能很多地方應該能用到。

3、HTML5/jQuery 3D焦點圖插件 多種超酷切換動畫

之前我們分享過一些很酷的焦點圖插件了，有些是基于jQuery的焦點圖應用，今天我們要分享一款基于HTML5和jQuery的3D焦點圖插件，該HTML5焦點圖有多種超酷的切換動畫，包括3D百葉窗、3D翻轉等特效，有些切換效果在高版本Chrome中有效果。

4、CSS3各大網站分享按鈕 帶網站Logo小圖標

對于CSS3分享按鈕，我們在之前的文章中已經分享幾款了，像純CSS3社會化分享按鈕 可固定網頁頂部、CSS3發光社會分享按鈕等。今天我又收集了一款非常強大的CSS3各大網站分享按鈕，非常多的按鈕，基本上一些國外的社交網站都有。另外，這款CSS3分享按鈕還帶有社交網站的Logo小圖標，外觀非常漂亮。

5、CSS3滑塊菜單 菜單動畫很酷

我們之前分享過不少很酷且非常實用的CSS3菜單，今天我們再來分享一款CSS3滑塊菜單，這款菜單初始化時是幾個很漂亮的小圖標，當鼠標滑過菜單項時，小圖標即展開成具體菜單內容，這些內容可以自己定義，效果非常不錯。

6、HTML5畫圖特效 超酷的筆刷動畫

之前我們分享過一款HTML5畫圖工具HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布，我們基本對HTML5的畫圖功能有一定的了解。今天我們要分享一款超酷的HTML5筆刷動畫，我們可以選擇不同的筆刷形狀，筆刷在畫布上移動時就會播放非常絢麗的動畫效果。

7、HTML5/CSS3實現蝙蝠俠人物動畫 蜘蛛俠變身

利用CSS3實現人物動畫效果非常多，我們在html5tricks上也分享了不少，像HTML5/CSS3實現笑臉動畫、純CSS3繪制可愛小男孩動畫等。今天我們再分享一款利用純CSS3實現的蝙蝠俠動畫，頁面加載后就會啟動蝙蝠俠的繪制，就像組裝汽車一樣。

8、HTML5 SVG環形圖表應用 很酷的數據初始動畫

之前我們也分享過幾個HTML5餅狀圖表應用，像HTML5 Canvas餅狀圖表，可以很清晰的展示各個數據的所占比例。今天要分享的這款HTML5圖表是一個環形的，和餅狀圖表類似，主要特點也是能清晰的了解每項數據所占的比例。這款HTML5環形圖表是利用SVG實現的，圖表數據在初始化的時候將出現非常酷的動畫效果。

9、HTML5迷你音樂播放器 3D翻轉播放按鈕

上一篇我們分享了一款外觀很酷的HTML5音樂播放器，這次分享的播放器比較小巧迷你，雖然外觀沒有上一個播放器那么精致，但是功能卻是很齊全的。該HTML5音樂播放器的特點是有一個3D的翻轉播放按鈕。當然對于HTML5播放器的外觀，大家可以自己設計定義。

以上就是9款超炫HTML5最新動畫源碼，你喜歡么？

出處：極客頭條

起HTML5，可能讓你印象更深的是其基于Canvas的動畫特效，雖然Canvas在HTML5中的應用并不全都是動畫制作，但其動畫效果確實讓人震驚。本文收集了7個最讓人難忘的HTML5 Canvas動畫，包括畫板、文字、圖表等，希望你會喜歡。

1、HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布

HTML5 Canvas還有一個比較實用的應用，那就是網絡畫板，這樣我們就可以在網頁上直接進行畫圖操作。今天要分享的這款HTML5 Canvas畫圖工具就可以簡單實現網絡畫圖的功能，我們可以自定義筆刷的類型、粗細、顏色，也可以定義畫布的大小和背景顏色等。我們也可以對這款HTML5畫圖工具進行擴展，讓它的畫圖功能更加完善。

在線演示 源碼下載

2、HTML5 Canvas瀑布動畫 超逼真

這次我們來分享一款很酷的HTML5 Canvas瀑布動畫，瀑布動畫非常逼真。整個瀑布動畫像是從石頭縫里流出來的溪水，然后沿著懸崖飛落下來，效果非常不錯。

在線演示 源碼下載

3、HTML5 Canvas可拖動的彈性大樹搖擺動畫

今天讓我們繼續來分享一個炫酷的HTML5動畫，它是一款基于HTML5 Canvas的大樹搖擺動畫，這款HTML5動畫的特點是我們可以拖拽樹枝，從而讓整棵樹搖擺起來，這樣就真實地模擬了大樹從搖擺到靜止的整個過程，相當逼真。

在線演示 源碼下載

4、HTML5統計圖表數據初始動畫

之前我們已經向大家分享很多HTML5圖表了，比如這款HTML5 Canvas折線圖表和柱形圖表就比較經典。今天要介紹的也是一款HTML5圖表，該統計圖表的特點是圖表數據在初始化的時候會出現很酷的動畫特效，特別是環形百分比應用還會出現百分比數的動態更新。

在線演示 源碼下載

5、HTML5 Canvas花朵生成器 可生成多種樣式的花朵

HTML5非常流行，利用HTML5制作動畫也非常方便，今天要分享一款利用HTML5 Canvas制作的花朵生成器，我們只需要在Canvas畫布上點擊鼠標，即可動態生成各種顏色樣式的花朵，并且每一朵花都可以緩慢地旋轉，非常炫酷。

在線演示 源碼下載

6、HTML5 Canvas繪制灰太狼 超級可愛

HTML5 Canvas相當于一個畫板，你可以在Canvas繪制任意的東西，今天要分享一款利用HTML5 Canvas繪制的灰太狼形象，個人以為，這個灰太狼繪制得十分逼真形象，小伙伴們都要驚呆了。以后我們再來弄一個HTML5 Canvas的喜洋洋如何？

在線演示 源碼下載

7、HTML5動感的火焰燃燒動畫特效

這又是一款基于HTML5的超炫動畫特效，是一款動感的火焰燃燒動畫效果。這款HTML5動畫火焰燃燒非常逼真，之前我們也分享過一些其他的HTML5火焰燃燒動畫，比如：HTML5 Canvas火焰燃燒動畫和純CSS3實現打火機火焰動畫。一般像這樣的HTML5動畫都是基于Canvas的，今天的這款也不例外。

在線演示 源碼下載

以上就是7個華麗的基于Canvas的HTML5動畫，希望對你有所幫助。