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

1、下載及初始化

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

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

然后在頁面body中創(chuàng)建一個(gè)<canvas>元素。

最后，以上準(zhǔn)備好了就能創(chuàng)建一個(gè)圖表了，在頁面中添加一個(gè)腳本。

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

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

2、基本演示

①柱形圖表

②線形圖表

③面積圖表

④餅形圖表

⑤柱、線混合

⑥散點(diǎn)圖

⑦網(wǎng)格線圖表

官方網(wǎng)站：

http://www.chartjs.org/

Chart.js只有一些基礎(chǔ)的圖表，簡單的可視化數(shù)據(jù)展示，同時(shí)能夠動(dòng)態(tài)改變數(shù)據(jù)、更新顏色、添加數(shù)據(jù)等，能夠重繪圖表調(diào)整到完美規(guī)模的粒度。內(nèi)含多種鼠標(biāo)事件，提供許多選項(xiàng)來配置動(dòng)畫的樣子。Chart.js適合只需要簡單圖表的項(xiàng)目，如果需要更復(fù)雜的顯示，可以選擇echarts或Highcharts圖表庫。

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

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

1、HTML5可愛的404頁面動(dòng)畫 很逗的機(jī)器人

很久以前我在網(wǎng)上看到一篇帖子，是專門分享創(chuàng)意404頁面的，很可惜我已經(jīng)找不到了。但是今天我找到一款利用HTML5實(shí)現(xiàn)的404機(jī)器人動(dòng)畫，當(dāng)你進(jìn)入該404頁面時(shí)，就會(huì)出現(xiàn)一個(gè)機(jī)器人在跳舞，非常可愛。這個(gè)機(jī)器人跳舞的動(dòng)作是利用HTML5和CSS3的動(dòng)畫屬性實(shí)現(xiàn)的。

2、HTML5/CSS3鼠標(biāo)滑過抖動(dòng)圖標(biāo) 非常可愛

這是一款簡單的利用CSS3實(shí)現(xiàn)的圖標(biāo)抖動(dòng)特效，首先我們精選了幾款常用而且漂亮的圖標(biāo)，并在圖標(biāo)下方寫有描述性的文字。當(dāng)我們把鼠標(biāo)滑過圖標(biāo)時(shí)，圖標(biāo)即會(huì)不停的抖動(dòng)，像是在告訴用戶“點(diǎn)我吧”，這個(gè)功能很多地方應(yīng)該能用到。

3、HTML5/jQuery 3D焦點(diǎn)圖插件 多種超酷切換動(dòng)畫

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

4、CSS3各大網(wǎng)站分享按鈕 帶網(wǎng)站Logo小圖標(biāo)

對(duì)于CSS3分享按鈕，我們?cè)谥暗奈恼轮幸呀?jīng)分享幾款了，像純CSS3社會(huì)化分享按鈕 可固定網(wǎng)頁頂部、CSS3發(fā)光社會(huì)分享按鈕等。今天我又收集了一款非常強(qiáng)大的CSS3各大網(wǎng)站分享按鈕，非常多的按鈕，基本上一些國外的社交網(wǎng)站都有。另外，這款CSS3分享按鈕還帶有社交網(wǎng)站的Logo小圖標(biāo)，外觀非常漂亮。

5、CSS3滑塊菜單 菜單動(dòng)畫很酷

我們之前分享過不少很酷且非常實(shí)用的CSS3菜單，今天我們?cè)賮矸窒硪豢頒SS3滑塊菜單，這款菜單初始化時(shí)是幾個(gè)很漂亮的小圖標(biāo)，當(dāng)鼠標(biāo)滑過菜單項(xiàng)時(shí)，小圖標(biāo)即展開成具體菜單內(nèi)容，這些內(nèi)容可以自己定義，效果非常不錯(cuò)。

6、HTML5畫圖特效 超酷的筆刷動(dòng)畫

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

7、HTML5/CSS3實(shí)現(xiàn)蝙蝠俠人物動(dòng)畫 蜘蛛俠變身

利用CSS3實(shí)現(xiàn)人物動(dòng)畫效果非常多，我們?cè)趆tml5tricks上也分享了不少，像HTML5/CSS3實(shí)現(xiàn)笑臉動(dòng)畫、純CSS3繪制可愛小男孩動(dòng)畫等。今天我們?cè)俜窒硪豢罾眉僀SS3實(shí)現(xiàn)的蝙蝠俠動(dòng)畫，頁面加載后就會(huì)啟動(dòng)蝙蝠俠的繪制，就像組裝汽車一樣。

8、HTML5 SVG環(huán)形圖表應(yīng)用 很酷的數(shù)據(jù)初始動(dòng)畫

之前我們也分享過幾個(gè)HTML5餅狀圖表應(yīng)用，像HTML5 Canvas餅狀圖表，可以很清晰的展示各個(gè)數(shù)據(jù)的所占比例。今天要分享的這款HTML5圖表是一個(gè)環(huán)形的，和餅狀圖表類似，主要特點(diǎn)也是能清晰的了解每項(xiàng)數(shù)據(jù)所占的比例。這款HTML5環(huán)形圖表是利用SVG實(shí)現(xiàn)的，圖表數(shù)據(jù)在初始化的時(shí)候?qū)⒊霈F(xiàn)非常酷的動(dòng)畫效果。

9、HTML5迷你音樂播放器 3D翻轉(zhuǎn)播放按鈕

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

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

出處：極客頭條

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

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

HTML5 Canvas還有一個(gè)比較實(shí)用的應(yīng)用，那就是網(wǎng)絡(luò)畫板，這樣我們就可以在網(wǎng)頁上直接進(jìn)行畫圖操作。今天要分享的這款HTML5 Canvas畫圖工具就可以簡單實(shí)現(xiàn)網(wǎng)絡(luò)畫圖的功能，我們可以自定義筆刷的類型、粗細(xì)、顏色，也可以定義畫布的大小和背景顏色等。我們也可以對(duì)這款HTML5畫圖工具進(jìn)行擴(kuò)展，讓它的畫圖功能更加完善。

在線演示 源碼下載

2、HTML5 Canvas瀑布動(dòng)畫 超逼真

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

在線演示 源碼下載

3、HTML5 Canvas可拖動(dòng)的彈性大樹搖擺動(dòng)畫

今天讓我們繼續(xù)來分享一個(gè)炫酷的HTML5動(dòng)畫，它是一款基于HTML5 Canvas的大樹搖擺動(dòng)畫，這款HTML5動(dòng)畫的特點(diǎn)是我們可以拖拽樹枝，從而讓整棵樹搖擺起來，這樣就真實(shí)地模擬了大樹從搖擺到靜止的整個(gè)過程，相當(dāng)逼真。

在線演示 源碼下載

4、HTML5統(tǒng)計(jì)圖表數(shù)據(jù)初始動(dòng)畫

之前我們已經(jīng)向大家分享很多HTML5圖表了，比如這款HTML5 Canvas折線圖表和柱形圖表就比較經(jīng)典。今天要介紹的也是一款HTML5圖表，該統(tǒng)計(jì)圖表的特點(diǎn)是圖表數(shù)據(jù)在初始化的時(shí)候會(huì)出現(xiàn)很酷的動(dòng)畫特效，特別是環(huán)形百分比應(yīng)用還會(huì)出現(xiàn)百分比數(shù)的動(dòng)態(tài)更新。

在線演示 源碼下載

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

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

在線演示 源碼下載

6、HTML5 Canvas繪制灰太狼 超級(jí)可愛

HTML5 Canvas相當(dāng)于一個(gè)畫板，你可以在Canvas繪制任意的東西，今天要分享一款利用HTML5 Canvas繪制的灰太狼形象，個(gè)人以為，這個(gè)灰太狼繪制得十分逼真形象，小伙伴們都要驚呆了。以后我們?cè)賮砼粋€(gè)HTML5 Canvas的喜洋洋如何？

在線演示 源碼下載

7、HTML5動(dòng)感的火焰燃燒動(dòng)畫特效

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

在線演示 源碼下載

以上就是7個(gè)華麗的基于Canvas的HTML5動(dòng)畫，希望對(duì)你有所幫助。