周在给学生讲授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的不断支持和完善，越来越多的开发者开始使用HTML5开发各种功能强大的web应用，可以说HTML5正在引领着互联网新革命。HTML5的火爆，使得HTML5成为了仅次于Java和Python开发的高薪职位，为了能够更快跨入高薪大门，以下就跟着千锋武汉HTML5培训小编简单来了解下HTML5从入门到精通应学习的内容。

想要学习HTML5，首先应该来了解下HTML5的特征有哪些？

1、本地存储。基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5APP Cache，以及本地存储功能。

2、实现多媒体更加简单。利用HTML5的和非常方便的在网页上添加视频和音频，不需要很复杂的代码，就能打造一款功能齐全的HTML5播放器。

3、三维图形和动画。HTML5的3D引擎却可以更方便的实现3D效果，而且更加逼真。

4、CSS3的运用。CSS3提供更多的CSS属性，可以做更丰富的渲染效果。

HTML5可以实现哪些功能呢？

1、一次编写，随处部署。HTML5可以在多种设备上运行，这是其他方式都无法做到的。

2、在互联网中分享。HTML5应用都有一个URL，因此它可以在互联网中被随意分享，并且在搜索时即可被找到。

3、多厂商标准，建立在协议之上。HTML5是众多公司努力的结果，没有一家厂商可以左右它的方向。

4、适用于多种环境。HTML5应用可以使用交互式设计来提供最佳体验，而不需要更改代码。你可以从桌面到手机到平板电脑无缝进行切换，而无需重复安装不同的应用。

HTML5基础内容了解之后，那么HTML5的前端技术也是必备的，其中包括：CSS、HTML、DOM、js、Ajax，jquery，Vue，jquery- mobile，zepto等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。这是前端工程师的最核心技能，是专做页面效果的技术。如果想更深条理的做好前端开收，那就需要学习和了解更多的东西，比如一些热门的框架backbone，angularjs 等;nodejs近几年也越来越水了，同样需要学习。

学习HTML5开发技术，想要入门到精通，以上知识内容和技能掌握是必备的。HTML5的发展如日中天，只要你有足够的热情和兴趣，并且肯努力，学好HTML5没有任何问题。所以，你还在犹豫什么，赶快来学HTML5吧！