html5快速制作,html5动画制作（教你如何快速绘制HTML5动画）

html5动画制作(教你如何快速绘制HTML5动画)

本周在给学生讲授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浏览效果

加载图片资源

使用Canvas借助JavaScript提供的drawImage方法进行绘图，需要提供要绘制的图片资源即绘图的坐标位置。该方法原型如下：

drawImage方法原型

因此我们需要加载图片资源，本例由于需要调用多个img实现定时不同图片的绘制，因此我们可以使用数组存储所加载的图片资源。本例图片数量为14，因此我们数组长度为14。使用素组存储图片实现代码如下：

加载图片资源代码

定义页面加载事件onload

本例设计在页面加载时自动播放动画，因此需要在JavaScript脚本中添加页面onload事件，在事件中编写绘图相关代码，主要代码包括获取画布canva与实例化绘图对象context。部分代码描述如下：

onload事件及绘图初始化

使用setInterval实现动画

使用setInterval方法实现动画主要需要定义回调函数与回调函数触发执行的周期，本例中我们使用匿名函数作为回调函数，触发周期设置为100毫秒。setInterval函数定义如下：

setInterval函数

在定义完函数之后可在其匿名函数函数体部分写入绘图方法dramImage(),实现周期调用不同图片资源进行绘图，最终展示出动画效果。为了保证循环调用14张图片，我们需要设置一计数全局变量i，由于我们图片采用数组存储，下标为数组，且从0-13进行编号，因此当计数值小于13时自动+1，指向下一数组下标，当为13时，设置计数值为0，回到数组第一元素，最终实现数组访问下标的循环。setInterval实现完整代码如下：

setInterval完整代码

实现效果展示

HTML动画效果展示

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！如需案例完整代码请关注并私信，往期前端设计文章链接如下：

html5快速制作,html5动画制作（教你如何快速绘制HTML5动画）相关推荐

HTML5可以用ae合成,影视动画制作软件如何新建固态层让所有素材融合更好 ae快速模糊...
大家好,爱学习的盆友们现在已经是年底了,小编在这里提前跟大家说声'新年快乐'我们的影视动画制作软件的讲解课程今年还讲这最后篇,后期的课程可能得年后回来再讲了--小编也回家心切本来小编想这篇教程是不讲 ...
html5 机械动画制作软件,KoolShow(HTML5动画制作助手)V2.4.3 正式版
KoolShow(HTML5动画制作助手)是一款十分优秀好用的HTML5动画制作的辅助工具.哪款动画制作工具比较好用?小编为你推荐这款KoolShow软件,功能全面,简单易用,使用后可以帮助用户更轻松 ...
Hype 4 Pro for Mac(HTML5动画制作软件)
Mac上一款非常好用的HTML5动画制作软件Hype 4 Pro,其长处是可以在网页上做出悦目的动画效果,无需 Flash 插件.macdown提供Hype mac版,有需要的朋友欢迎体验! Hype ...
html5动画在线制作工具,KoolShow-KoolShow(HTML5动画制作工具) v2.4.4 官方版-CE安全网...
KoolShow是一款非常专业实用的HTML5动画制作工具,KoolShow界面简洁,功能强大,用户使用这款软件可以为文本.图像.矢量图形.音频.视频.幻灯片和jQuery小部件添加动画效果,辅助用户 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个复古手机键盘（带声音）的动画效果~~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个复古手机键盘(带声音)的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
html5课件动画制作,从此再也不担心课件/动画的开发了！
原标题:从此再也不担心课件/动画的开发了! 数字学习工具定期推送优质地数字学习工具,敬请期待! 本期编辑:王幸娟.冯孟坭.丁雪菲在前面的文章中,我们向大家隆重推出了本公众号运营团队的精诚之作--& ...
html 动画制作工具,html5动画制作10大工具介绍
相比于html4,html5最大的优势就是增加了和两个标签,使得不安装插件的情况下可以播放动画.每一类程序的开发功能的实现都必须利用相应的制作工具.那么,html5动画制作需要那么工具辅助呢? 1.B ...
html5动画在线制作工具,KoolShow(HTML5动画制作工具)
KoolShow是一款动画制作软件,能够帮助用户制作Flash动画,用于为文本.图像.矢量图形.音频.视频.幻灯片和jQuery小部件添加动画效果,方便好用. 基本简介使用KoolShow多媒体创作 ...
HTML5超帅动画制作－LTweenLite的妙用
lufylegend.js是一个开源的HTML5游戏引擎,在游戏中往往会有各种的动画,这些动画有些是flash文件,有些是视频文件,本次就来利用lufylegend制作一个帅气的游戏动画,如下图. 测 ...

html5快速制作,html5动画制作（教你如何快速绘制HTML5动画）

html5快速制作,html5动画制作（教你如何快速绘制HTML5动画）相关推荐

最新文章

热门文章