周在給學生講授JavaScript課程中setInterval方法時，想到了我們在網上看到的各類GIF動圖比較有意思，就將其引入到教學中，教學內容設計如果通過HTML5與JavaScript實現網頁類似GIF效果的動態圖。于是在網上搜集了部分gif格式動圖，將每一個Gif動圖分解為一組jpg格式圖片，再采用setInterval與html5 Canvas進行動畫的實現。通過學習可以讓學生進一步了解canvas動畫實現的過程與原理。并將其發布到頭條，也希望對有興趣的初學者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下：

實現動畫的素材我們已經給出，主要通過gif動圖導出一組圖片，下面對html5動畫實現過程進行簡單說明。

基本思路

實現其動畫的基本思路是通過HTML5提供的canvas元素進行圖片的繪制與展示，借助setInterval方法實現間隔指定時間調用新的圖片實現重新繪圖。其中繪圖主要使用drawImage方法進行繪圖，最終通過圖片依次重繪實現動畫效果。具體實現過程如下：

HTML5 Canvas設置

在頁面body部分添加Canva標簽，設置其id屬性為canv，寬度為600，高度為400,編寫代碼描述如下圖：

加載圖片資源

使用Canvas借助JavaScript提供的drawImage方法進行繪圖，需要提供要繪制的圖片資源即繪圖的坐標位置。該方法原型如下：

因此我們需要加載圖片資源，本例由于需要調用多個img實現定時不同圖片的繪制，因此我們可以使用數組存儲所加載的圖片資源。本例圖片數量為14，因此我們數組長度為14。使用素組存儲圖片實現代碼如下：

定義頁面加載事件onload

本例設計在頁面加載時自動播放動畫，因此需要在JavaScript腳本中添加頁面onload事件，在事件中編寫繪圖相關代碼，主要代碼包括獲取畫布canva與實例化繪圖對象context。部分代碼描述如下：

使用setInterval實現動畫

使用setInterval方法實現動畫主要需要定義回調函數與回調函數觸發執行的周期，本例中我們使用匿名函數作為回調函數，觸發周期設置為100毫秒。setInterval函數定義如下：

在定義完函數之后可在其匿名函數函數體部分寫入繪圖方法dramImage(),實現周期調用不同圖片資源進行繪圖，最終展示出動畫效果。為了保證循環調用14張圖片，我們需要設置一計數全局變量i，由于我們圖片采用數組存儲，下標為數組，且從0-13進行編號，因此當計數值小于13時自動+1，指向下一數組下標，當為13時，設置計數值為0，回到數組第一元素，最終實現數組訪問下標的循環。setInterval實現完整代碼如下：

實現效果展示

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，往期前端設計文章鏈接如下：

1. 前端設計-JavaScript中的值、引用傳遞與垃圾回收
2. 前端設計-JavaScript美女拼圖游戲開發實例
3. 前端設計- JavaScript驗證碼制作及實例分析
4. 前端設計-Ajax技術及實例展示
5. 前端設計-響應式頁面開發基礎
6. Web開發前端、后端與全棧的區別是什么？

起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動畫，希望對你有所幫助。

們分享過很多漂亮的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最新動畫源碼，你喜歡么？

出處：極客頭條