周在给学生讲授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最新动画源码，你喜欢么？

出处：极客头条