基于HTML5中canvas技术的图形、图像、动画的研究讲解.doc

基于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，为网页添加绘图功能，为网页加入原生的视频支持。广义的 HTML5 还包括 CSS3 以及 JavaScript 的更多接口。把下一代网页技术统称为 HTML5。”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的新增功能——离线存储，完美的解决了这一问题。其原理是，HTM