TML5多媒体作品以其对各种平台的兼容而见长，目前已获得了广泛的应用。如果我们需要制作自己的HTML5多媒体作品，一个方便之选就是利用现成的在线制作工具“百度H5”。

首先访问“百度H5”网页（https://h5.baidu.com/），可以看到非常简单的页面，仅有“我的H5”和“我的模板”两个选项。其中“我的模板”是通过套用模板的方式来制作HTML5作品，而“我的H5”则可以完全靠自定义各种参数来自由创作，制作好的作品也会显示在这里（图1）。

1. 通过创意模板轻松制作

在首页中选择“我的模板”，随后会进入一个模板展示页面，这些都是设计者们分享的模板。根据你所要设计的作品的类别，可以按类选择一个类似的作品作为制作的模板，然后在此基础上进行修改，即可快速形成自己的多媒体作品（图2）。

比如要制作一个招生方面的媒体作品，选择如图所示的秋季班招生模板，然后点击右下角的“使用模板”按钮（图3）。

接下来先要为作品命名，例如“我们的幼儿园招生了”。输入完毕点击“确定”按钮（图4）。

随后进入实质性的模板修改编辑阶段。对于不合适的内容，可先删除页面元素再添加。点击“文本”菜单插入所需文本内容。同理，可使用右边的“媒体”按钮插入图片、音频、视频、嵌入视频、全景图等内容。如果是PSD图片，则直接用PSD菜单载入。若版面中需要插入一些图标或形状，则点击“图形”菜单选择添加（图5）。

此外，对于作品中所要用到的展示数据，可以通过插入图表、表单等方式，非常轻松地完成数据展示制作（图6）。如果要实现更多的效果，可通过“插件”菜单，选择添加页面加载套件和加载进度、添加计数器、添加帧动画、添加相册或地图等。

对于需要修改的属性，可通过窗口右侧的分类属性窗口选择设置。通过窗口下方的编辑区域，可控制动画、加载页、全局全景和背景、当前页等参数设置。例如，要定制个性化的加载页面效果，点击“加载页”选项卡，然后通过下方的滑块，对加载页中的图片和进度进行自定义编辑（图7）。

对页面上的各种元素进行修改和编辑完成之后，点击工具栏左上角的磁盘按钮将作品保存在网上。注意，编辑过程中产生的内容软件会自动保存，但为了防止丢失，还是要养成勤于手动保存的习惯。

最后，就可以发布作品了。点击工具栏上的“发布”按钮执行发布操作（图8）。

由于作品是保存在网络服务器中的，因此作品的共享是以网址的形式体现的。发布时要填写作品分享的标题，设置个人域名。我们只需在“个性化域名”中填写自己命名的作品个性域名地址，发布后其他人就可以用这个域名来访问HTML5作品了（图9）。

小提示：使用上述服务需要使用自己的百度账号登录。为维护网络安全，目前发布信息需先经过用户实名制认证方可进行。

2. DIY 完全自己设计制作

套用模板适合于初学者或设计能力不强的用户。其实，不用套用模板，完全可以从头全部由自己来设计作品。

制作时，在主页中选择“我的H5”，然后点击空白页上印有圆圈套加号图标的按钮，向导会询问创建什么样的布局。从“分页布局”或“整页布局”中选择一种布局方式。如果是分页布局，则依靠页面间的前后滑动实现简单跳转；如果是整页布局，则将整个页面分为不同区域，各部分还可创建链接，实现不同的功能（图10）。

随后其他步骤与第1部分的添加和设置操作方法相当，只是全要亲自设计，不能套用现成的组件而已。在创作过程中，只要善于使用系统提供的文本工具编排文字内容，用媒体和图形工具添加图片、图形、音视频，数据相关的内容使用图表、表单等工具，借助于“插件”扩展来补充完善，发挥自由想象的创作空间，一定能创作出更具个性化的作品。

命中，一定有一些日子和其他的日子不一样

你需要认认真真盛装出席

时光里，一定有些人和事很特别

带给你微小而确定的幸福

某一刻，一定有一件物品一段经历

让你觉得生活有趣而不同

来吧，用简客汇集你的照片成册

让更多人遇见你

你的时光，你的故事，你的美好。

现在简客带着你的美好来到了这里。

简客是一款HTML5相册生成和分享的应用。首次使用会提示登陆，支持微信，微博，QQ，FB一键登陆。登陆后你所有的创作都会同步到云端，不怕会丢失。

主页面展示着热门的模版和素材，左右滑动可以切换模版，主页面默认显示10个模版，涵盖了旅行，亲子，聚会，个人，婚礼，其他等各种类型模版。

如果你觉得才区区10个，也好意思在你的火眼晶晶面前卖弄，这种东西怎么可能入的了您的法眼。当然不知如此，在最后一个模版处左滑即刻打开更多推荐的模版。你以为这就是全部了么？NO！点击主页面左下角的按钮，模版会乖乖自动分类出现在你的面前。包括了婚礼，情感，旅行，聚会，个人，亲子，杂志，其他等八个分类。不论你需要什么模版它通通都有。有尽100个模版可供选择。

选择好心仪的模版，打开后系统会自动动态的展示你所选择的模版，上滑查看下一页。点击下部正中央的编辑按钮进入编辑模式，如果是网络素材，系统会先进行下载。（PS.此步骤建议在WIFI下操作，当然土豪请无视。）

下载成功后进入图片选择模式，系统会提示你最多可以添加的图片数量，默认打开是以最近图片为排列的选框，当然也支持从相册中选择你需要的图片，更加方便用户选择图片。

点击下一步软件开启初始化素材，如果选择的图片较多的话，此步骤可能需要一定的时间。初始化完成后系统会自动排列并依照模版生成动态相册。

预览右侧按钮为调整页内顺序选项，你可以根据自己的喜好任意调节播放顺序。中间的播放按钮为预览按钮，点击后开始全屏预览。右侧按钮为配乐按钮，可以选择无声，也可以从自带素材库中选择，自带了14中音效可供选择。加入符合作品的音乐和特效，创造更生动的回忆。

编辑完成后点击右上角的软盘标志即可保存。软件会让你选择影集的分类。并且为他起一个优美的名字，值得一提的是，名字右侧有一个小锁按钮，点按后可以将作品设为私密，其他人无法观看。确定后会提示你保存到作品集还是草稿箱。保存草稿后后期还可以继续修改，保存到作品集则不能另作修改。不错很贴心的是，当你选择保存到作品集的时候系统会提示你是否也同时保存到草稿箱以方便以后的修改。很是人性化。

上传完成后你就可以把他分享给你的朋友们观看了。支持微信，微博，空间，FB，链接分享。谁也无法阻挡你分享快乐的心情。

让你的照片由静止变成动态，用音乐、照片、文字认认真真将一段特别时光分享给你的朋友们。也送给自己一份生动的回忆。

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