摘  要

 

动画经过人们几百年来的不懈探索，从最初的想象，成为影视、广告等行业普遍流行的表现形式。动画的制作手段也逐渐丰富多样，传统动画依赖着赛璐璐胶片，制作过程费时费力，而数字动画可借助Flash、After Effects、Canvas等计算机技术，不仅降低了制作成本，还提高了画面效果。

伴随着人类对科技的探索，人工智能不再是梦想。目前以“人工智能”为主题的科幻电影不计其数，本文也将以“人工智能畅想”为主题，通过HTML5 Canvas技术，结合实际对计算机动画制作流程进行调整，制作一部基于HTML5 Canvas的二维Web动画短片。

本文介绍了国内外动画的研究历史和发展现状，研究了本动画作品制作时运用到的美学艺术和计算机技术相关理论知识，还比较了HTML5 Canvas与传统动画软件Flash之间的差异，最终采用HTML5 Canvas技术和Canvas绘图原理相结合的实现方式来完成制作。本文对Web动画的设计思路和实现方式进行了详细的阐述，最终成品以mp4视频形式展现。

 

关键词：人工智能，HTML5，Canvas，二维动画，Web动画

目  录

 

第一章 绪论 1

1.1 研究背景及意义 1

1.2 研究内容和特色 2

1.3 论文组织和结构 2

第二章 理论概述 4

2.1 动画的制作流程 4

2.2 二维动画概述 5

2.3 HTML5 Canvas技术 5

2.4 Canvas绘图原理 6

第三章 二维动画的前期设计 7

3.1 总体构思 7

3.2 剧本策划 7

3.3 角色设计 8

3.3.1 主人的形象 8

3.3.2 艾达的形象 9

3.4 场景设计 10

3.4.1 回收站 10

3.4.2 花园 10

3.4.3 书房 11

3.4.4 客厅 11

第四章 基于HTML5 Canvas的二维动画的实现 13

4.1 关键帧绘制 13

4.2 角色动画的实现 13

4.3 角色与背景的合成 14

4.4 场景的连接实现 17

4.5 配音与音效 18

4.6 后期优化 19

4.6.1 特效的制作 19

4.6.2视频导出 19

4.6.3视频压缩 19

第五章 总结和展望 21

5.1 总结 21

5.2 展望 21

参考文献 22

致  谢 23