整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
周在給學生講授JavaScript課程中setInterval方法時，想到了我們在網上看到的各類GIF動圖比較有意思，就將其引入到教學中，教學內容設計如果通過HTML5與JavaScript實現網頁類似GIF效果的動態圖。于是在網上搜集了部分gif格式動圖，將每一個Gif動圖分解為一組jpg格式圖片，再采用setInterval與html5 Canvas進行動畫的實現。通過學習可以讓學生進一步了解canvas動畫實現的過程與原理。并將其發布到頭條，也希望對有興趣的初學者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下：
素材一
實現動畫的素材我們已經給出，主要通過gif動圖導出一組圖片，下面對html5動畫實現過程進行簡單說明。
實現其動畫的基本思路是通過HTML5提供的canvas元素進行圖片的繪制與展示，借助setInterval方法實現間隔指定時間調用新的圖片實現重新繪圖。其中繪圖主要使用drawImage方法進行繪圖，最終通過圖片依次重繪實現動畫效果。具體實現過程如下：
在頁面body部分添加Canva標簽，設置其id屬性為canv，寬度為600，高度為400,編寫代碼描述如下圖：
添加畫布元素
canvas瀏覽效果
使用Canvas借助JavaScript提供的drawImage方法進行繪圖，需要提供要繪制的圖片資源即繪圖的坐標位置。該方法原型如下：
drawImage方法原型
因此我們需要加載圖片資源，本例由于需要調用多個img實現定時不同圖片的繪制，因此我們可以使用數組存儲所加載的圖片資源。本例圖片數量為14，因此我們數組長度為14。使用素組存儲圖片實現代碼如下：
加載圖片資源代碼
本例設計在頁面加載時自動播放動畫，因此需要在JavaScript腳本中添加頁面onload事件，在事件中編寫繪圖相關代碼，主要代碼包括獲取畫布canva與實例化繪圖對象context。部分代碼描述如下：
onload事件及繪圖初始化
使用setInterval方法實現動畫主要需要定義回調函數與回調函數觸發執行的周期，本例中我們使用匿名函數作為回調函數，觸發周期設置為100毫秒。setInterval函數定義如下：
setInterval函數
在定義完函數之后可在其匿名函數函數體部分寫入繪圖方法dramImage(),實現周期調用不同圖片資源進行繪圖，最終展示出動畫效果。為了保證循環調用14張圖片，我們需要設置一計數全局變量i，由于我們圖片采用數組存儲，下標為數組，且從0-13進行編號，因此當計數值小于13時自動+1，指向下一數組下標，當為13時，設置計數值為0，回到數組第一元素，最終實現數組訪問下標的循環。setInterval實現完整代碼如下：
setInterval完整代碼
HTML動畫效果展示
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，往期前端設計文章鏈接如下：
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
本課程由Mugeda-H5交互設計云平臺首席設計師岑遠科親自錄制，岑老師曾為網易，華為，大眾點評等知名品牌創作移動端HTML5動畫案例，在業內屬HTML5動畫大神級別。理論與實踐結合度高。 本課程中將逐步講解目前熱門H5作品制作方法，本次課程主要內容為目前市面上比較流行同時邏輯不是很復雜的案例講解。
了解更多游戲H5案例請關注公眾賬號-Mugeda！
端開發的入門門檻其實非常低，與服務器端語言先慢后快的學習曲線相比，前端開發的學習曲線是先快后慢。
所以，對于想從事IT工作的人來說，前端開發是個不錯的切入點。
對于零基礎的HTML5學習者，首先需要的是一條思路清晰的HTML5學習路線，學習路線如同一本書的目錄，有了它就可以對一門語言有宏觀概念，學習起來更有針對性，這一點對零基礎小白尤其重要。
下面，小編就為大家揭曉HTML5入門路線是什么樣的？
基本概念
HTML(Hypertext Markup Language，超文本標記語言)，是用來創建網頁和網絡應用的標準標記語言，可用來定義和描述網頁的內容和結構。和CSS、JavaScript一起組成互聯網的基礎技術。
1、HTML5介紹
內容包括：互聯網發展趨勢、H5語言的優勢、簡單易學人人都能編程、H5就業和薪資情況、H5常見的項目與產品、H5的未來與方向
2、HTML基礎
內容包括：HTML簡介與歷史版本、常用開發軟件、常見標簽與屬性、表格與表單、標簽規范與標簽語義化、實戰：網頁結構布局
3、CSS基礎
內容包括：css簡介與基本語法、常見的各種樣式屬性、CSS選擇器與標簽類型、理解盒子模型與CSS重置、浮動與定位、利用photoshop工具測量樣式、HTML+CSS開發網頁、實戰：高仿電商首頁效果
4、CSS3基礎
內容包括：css3常見樣式、css3選擇器、變形與動畫、3D效果與關鍵幀、彈性盒模型
5、移動端布局
內容包括：移動端基本概念、viewport窗口設置、移動端布局方案、rem、vh、vw等單位、響應式布局、bootstrap框架
6.、JavaScript基礎
內容包括：JS簡介、JS變量、數據類型與類型轉換、運算符與優先級、流程控制-if..else流程控制-switch...case、流程控制-while、do..while、for循環、break、continue語法、函數定義與調用、全局變量與局部變量。
還有函數傳參與返回值、函數作用域與變量作用域、DOM的基本操作、定時器使用、this指向與修改指向、數組、字符串等方法操作、時間對象與正則對象、掌握常見BOM操作、常見事件與事件細節、JSON與AJAX、JSONP跨域操作、前端cookie的使用、實戰：JS配合HTML與CSS完成電商項目
7、jquery框架
內容包括：jquery框架介紹及優勢介紹、jquery核心思想、jquery常見方法、jquery動畫操作、jqueryAJAX操作、jquery工具方法、利用jquery快速開發網頁
8、PHP基礎
內容包括：PHP簡介與基本語法、mysql數據庫及sql語法、apache服務器與集成開發工具、PHP鏈接數據庫、PHP與AJAX交互、實戰：留言板、登錄、注冊等
9、H5基礎項目
內容包括：項目簡介、項目功能演示、項目劃分及框架、編寫HTML頁面結構、設置CSS樣式、添加JS交互、可選框架：bootstrap、jquery、PHP等、項目調試及兼容、項目驗收
雖然HTML5前端薪資高入門門檻低， 但是俗話說得好：入門容易，精通難。
HTML5前端開發的知識點繁多，要想真正掌握HTML5前端工程師開發技能，并非易事。
踩樓、私信小編，軟件資源免費送！
如果你想學習HTML5前端，想高薪就業，就來樂購IT教育學院，我們有優質的師資，完備的建站流程和一流的開發、設計人員。是學編程與設計錯不了的選擇！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
