周在给学生讲授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开发前端、后端与全栈的区别是什么？

<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教育学院，我们有优质的师资，完备的建站流程和一流的开发、设计人员。是学编程与设计错不了的选择！