文档介绍：
基于HTML5中canvas技术的图形、图像、动画的研究
1.绪论
1.1研究背景
HTML5 标准在今年的10月28号正式发布,这一新标准使得基于互联网,移动互联网的应用开发具备了统一的格式,从此不再区分版本和终端。这极大的节省了开发时间以及成本。这是HTML5引起众多开发人员兴趣的原因之一。
此外,HTML5的出现,将是Web开发技术的一次重要飞跃。它不仅能够使得网页具备更加强大,绚丽的功能。而且,还改变了互联网的许多方面。譬如,降低插件的使用、支持动态生成图像、允许Wed程序利用本地存储、简化Web开发的数据提取、支持位置服务,让Web播放更加流畅等。这完美的解决了之前的好多问题。如,网站的推广不再受到大部分插件的制约。当用户无法上网的时候,仍然可以使用缓存文件完成一些功能。当然用户体验也得到大大提升。
HTML5也迎合了现代人的需求。因为,现在的生活节奏快,网络用户更偏向喜欢标题、图片、视频,等形式。它们可以更加直接快速的让人们达到阅读目的。我们也希望网页变得更加动态有趣,提供更多的互动机会。
HTML5 的发展前景将非常广阔,学习HTML5的时候到了。
1.2研究意义
首先,HTML5使得用户可以通过不同的终端设备访问相同的程序以及基于云的内容。这样我们在创建网站的时候将不再需要考虑不同终端,不同版本带来的问题。既节省了开发时间,又节省了开发成本。
其次,HTML5新增的一些功能,可以使我们的网站变得更加强大,美观。企业能够成功的推广自己,在很大程度上会依赖于网站的合理设计。
1.3国内外研究现状
在国外,HTML5这一新标准,受到许多业内巨头的追捧。谷歌、苹果等把它形象的描述为用户体验的未来,微软的IE9 中也加入了对html5的大量支持。到2012年11月,支持HTML5的普及率就已经达到66%。
相比,国内的普及率要低些。主要原因在于,国内操作系统的更新速度较慢。但是,HTML5标准在国内的普及速度很快。目前大部分技术人员已经开始尝试着在各类网站中应用更多HTML5的新特性,这将会为互联网带来新面貌。
2.关键技术介绍
2.1 HTML5
2.1.1 HTML5的概念
狭义的 HTML5,就是 HTML 语言的第五版,即最新版本。相对于 HTML4,这个新版添加了一些新的元素,这些新的元素一部分是为了让网页更加合理,另一部分是为了添加新的功能。里面最受欢迎的是<canvas> 和<video>,<canvas>可以为网页添加绘图功能,<video>可以为网页加入原生的视频支持。
广义的 HTML5 ,还包括 CSS3 以及 JavaScript 的更多接口。我们把下一代网页技术统称为 HTML5。
2.1.2 HTML5主要新增功能及特性介绍
HTML5主要在速度、存储、位置、图像等方面进行了优化。
内容标签优化
HTML5之前版本的内容标签,它们的级别相同,不利于很好的区别各部分内容。如:<div id=”header”>、<div id=”footer”>、<div id=”content”>。相对的,HTML5的标签,级别不同,各种统计软件以及搜索引擎都可以快速识别出各部分内容。如:<footer>、<header>、<content>,这样的标签,使得页面的布局更加清晰明了。
表格体系优化
现在只需要用HTML5,就可以做出功能强大的表格。你可以通过一个简单的设置,来定义表格中每一个单元格的输入格式,如日期格式等等。当然你也可以设置某一项是否为必填项目。之前,要实现这样的功能,是需要借助JS,或者PHP才能实现的。
(3) 新增 Canvas API
目前大部分网页都不能为用户提供直接在网页上绘图的功能,即使是简单的几何图都不能实现。与图片的交互也是非常局限的,大多数只是简单的保存和点击。想要实现在网页上绘图或者希望对图片实现更多的交互操作,就需要借助flash等插件来实现。
HTML5新增的canvas元素可以让用户使用JavaScript 在网页上绘制图像。一个canvas 元素就像是一块画布,画布是一个矩形区域,可以控制画布上的每个像素。也可以使用SVG和MathML在网页上绘图,呈现矢量图形和复杂的数学公式。
我们可以想象,随着技术的不断发展,我们有可能实现在线绘图,不再需要安装那些基本的绘图软件。与此同时,我们也可以实现,收集和生成用户鼠标在网页中经过的轨迹,进而分析我们的网站设计是否合理,该如何优化。以求不断提高用户体验。
(4)音视频 API
使用HTML5就可以直接对,音频、视频进行整合。与此同时,HTML5提供了一整套功能强大的API ,用来控制音视频的播放。这丰富了对媒体播放的控制。
(5)存储(离线网络应用程序——文件缓存)
目前Web应用非常广泛,分析其优势,在于,它不需要安装,且需要占用的内存很小。要想使用WEB,就必须在一个有网络信号的地方。但是,目前网络信号不能够覆盖所有的地方。这给我们带来了极大的不便。也成为制约web 的一大问题。
HTML5的新增功能——离线存储,完美的解决了这一问题。其原理是,HTML5的Web storage API采用了离线存储,就能够生成一个清单文件,该清单文件由一系列的URL列表文件组成,这些URL 分别指向,如CSS文件、JS文件、图片、视频等。(这些文件在用户浏览相关页面的时候已被缓存到客户端)当用户无法上网的时候,仍然可以使用这些文件完成一些功能。用户在离线时的一些更改,也会被记录到这个清单中。重新连线之后,就会自动将更改返回到应用当中。
HTML5 的离线存储功能,也完美的代替了cookies。Cookies一直用于将网站密码缓存到本地,当需要时将密码信息发送到服务器。它存在很大的缺陷,就是密码信息会被反复的在本地和服务器间传输。这不仅增加了信息安全的风险,也占用了带宽。Web storage API 支持4M以上的空间作为缓存,不在将信息反复得在本地和服务器间传输。只是传输一些必须的文件。这样一些个人信息将更加安全,同时也节省了带宽。

(6) 速度
Web Workers 让 JavaScript 可在后台多线程运算,XMLHttpRequest 2 能让 Ajax 请求提速,都是为网页程序提速的。
(7)利用Geolocation API获取地理位置信息
在万维网中,人们只知道某台电脑的IP地址,却无法知道那些数据所对应的PC所处的真实位置。最新版本的HTML5支持位置服务,它通过提供应用接口——Geolocation API,来共享自己的地理位置信息。
简要说明Geolocation API所具备的特性:
(1)本身不去获取位置信息,而是通过如IP、WIFI、GPS等第三方来获取
(2)用户可以随时开启或者关闭这个功能,并且在程序调用位置信息之前会先征得用户的同意,这样就可以很好的保护用户的隐私。
(8)新增WebSocke协议,节省宽带资源,实现实

1