基于Canvas的动画技术研究与开发实践.docx

摘要：2016年10月HTML5发布以来，发展速度迅猛。一方面是由于移动互联网的普及以及手机、平板等可移动设备性能的提高；另一方面，也是由于其自身开发简单、运营成本低、跨平台性等优势受到了业界巨头的青睐。早在2010年，乔布斯就在公开信上痛击Flash安全性差、闭塞、收费、续航时间短等缺点，其搭载iOS的iPhone和iPad从一开始就拒绝了Flash；IE方面市场占有率逐年下降，在2016年初，给IE8、IE9和IE10提交最后一次补丁后宣布放弃；Google也表示，从2016年9月Chrome53开始，Chrome浏览器会阻止Flash的内容载入后面，将HTML5设置为网页的核心内容，例如游戏和视频的默认选项。这都意味着，Flash终将退出历史的舞台，HTML5必将大行其道。

本文主要介绍了HTML5标准的研究背景和意义以及国内外研究状况，基于HTML5的Canvas动画与HTML5的SVG元素的比较，与传统动画的实现做比较。还介绍了实现动画的关键技术和开发环境。本文第四章是该设计实现的重点部分，在详细介绍和研究Canvas的基础上，开发了一款基于HTML5 Canvas名为“大脸豆豆”的动画，包括做动画的需求分析、可行性分析以及具体实现代码等。

关键词：HTML5 Canvas2D动画  动画制作

目录

摘要

Abstract

1 绪论-1

1.1 研究的背景及意义-1

1.2 国内外相关研究及发展历程-1

2 HTML5和Canvas技术概述-1

2.1 HTML5技术概述-2

2.2 HTML5Canvas技术概述-2

2.3 HTML5的SVG与canvas的比较-2

2.4 Canvas 动画与Flash做比较-3

3 相关技术简介-4

3.1 CSS样式表-4

3.2 JavaScript-4

4 基于Canvas的动画的实现-5

4.1 基于Canvas的动画系统需求分析-5

4.2 系统开发工具以及运行环境-8

4.3 基于Canvas动画的实现-9

4.4 基于Canvas动画的基本图形图案-10

4.5 大脸的移动-13

4.6 改变大脸的方向-14

4.7 大脸吃到豆豆-16

4.8 大脸碰到画布的边缘-17

4.9 动画的不足之处-17

5 结束语-17

参考文献-18

致谢-19