基于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 HTML52.1.1 HTML5的概念狭义的HTML5，就是HTML 语言的第五版，即最新版本。

相对于HTML4，这个新版添加了一些新的元素，这些新的元素一部分是为了让网页更加合理，另一部分是为了添加新的功能。

里面最受欢迎的是<canvas> 和<video>，<canvas>可以为网页添加绘图功能，<video>可以为网页加入原生的视频支持。

广义的HTML5 ，还包括CSS3 以及JavaScript 的更多接口。

我们把下一代网页技术统称为HTML5。

2.1.2 HTML5主要新增功能及特性介绍HTML5主要在速度、存储、位置、图像等方面进行了优化。

（1）内容标签优化HTML5之前版本的内容标签，它们的级别相同，不利于很好的区别各部分内容。

如：<div id=”header”>、<div id=”footer”>、<divid=”content”>。

相对的，HTML5的标签，级别不同，各种统计软件以及搜索引擎都可以快速识别出各部分内容。

如：<footer>、<header>、<content>，这样的标签，使得页面的布局更加清晰明了。

（2）表格体系优化现在只需要用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协议，节省宽带资源，实现实时通信目前，绝大多数网站为了能过做到即时通讯，都用到一种叫做轮询的技术。

简单来说，轮询就是每隔一小段固定的时间，浏览器就会对服务器发出请求，服务器收到请求之后，就会将最新的数据返回到浏览器端。

当然，浏览器需要不断的发出HTTP request，才能够真正的实现即时通讯。

这样就带来一个很大的问题，就是占用了太多的宽带资源以及服务器资源。

HTML5推出以后，新增了. WebSocket API。

WebSocket API可以实现浏览器与服务器端的握手动作。

之后，就形成了WebSocket通道，它可以实现数据的传输。

客户端与之间的交换的数据信息量非常小。

而且，服务器可以做到主动向浏览器发送最新的信息。

与之前的轮询技术相比，有了很大的及进步。

2.2Javascript2.2.1Javascript概述我们都知道JS是一种脚本语言，它的代码是可以直接嵌入到网页中的，不需要编译。

这意味着JS不需要大量的代码就可以实现我们想要的功能。

JS与Java 这种编程语言相比较，编写环境要宽松的很多。

它非常适合那些WEB设计人员，因为他们只是想要为网页天剑一些简单的动画。

需要明确的一点，是JA V A和JS 是两种完全无关的语言。

2.2.2jQuery了解jQuery是一个JS库，它是对JS的封装。

当我们需要JS实现某一功能时，我们可以简单地从类库中调用现有的jQuery，这大大缩减了编程人员时间上的花费，同时也降低了编程的难度，与此同时，代码的精简，也让后期的维护变得更加容易。

2.2.3DOMDOM是一种，用于表示文档元素的方法。

这种方法可以使得HTML页面中所有元素的信息传递到JS中，并进行处理。

需要明确的一点是，DOM表示内容的原始结构。

网页内容加载之前，必然会先加载DOM。

2.3 canvas的初步认识在HTML5代码中天剑canvas标签，实际上，就是在网页中添加了一块巨型的画布，画布的默认大小为300*150，当然，它的大小是可以控制的。

Canvas需要配合JS来完成各种图形的绘制。

目前HTML5正在被大部分浏览器支持，所以我们研究canvas是非常有必要的。

2.4 canvas与flash 的对比2.4.1要想在网页上观看通过FLASH制作的动画，就必须安装FLASH插件。

HTML5新增的canvas元素可以让用户使用JavaScript 在网页上绘制图像。

一个canvas 元素就像是一块画布，画布是一个矩形区域，可以控制画布上的每个像素。

它不需要任何外部插件，只要浏览器对HTML5是支持的，我们就可以在网页中直接做出想要的图像或者动画。

2.4.2Flash的脚本相对来说，是比较简单的。

即使你不够专业，也能够看得懂。

但是，要想利用canvas来绘制图形、图像、动画，就需要开发人员对相应的技术有较深的理解。

2.4.3Flash的出现以及发展要早于canvas，它的封装性自然要更成熟一些。

2.4.4 canvas 相对于flash 更利维护。

网页以对象的形式来插入Flash动画，只有其设计者才能够知道它具体的内部特点。

因此网页的设计者，只能够做到简单的插入，而不能根据自己的想法，对其做出适当的更改。

而canvas 的本质就是一个HTML5元素，所以对canvas的操作就像对网页中其他元素的操作。

2.4.5最后，canvas和flash 都可以跨平台开发。

2.5 目前canvas主要的应用方向2.5.1 canvas在网游的图形设计中具有非常大的潜力，这是有目共睹的。

2.5.2 移动设备的banner广告，可以用canvas实现很好的效果2.5.3 可以实现，对文字的简单渲染2.5.4 网站的开发人员可以利用canvas技术更好地做到基于网络的数据传输2.6 canvas与SVG绘图技术的对比首先对SVG进行简单的介绍，SVG是可伸缩矢量图形的英文简称。