基于HTML5中can vas技术的图形、图像、动画的研究
1.绪论
1.1研究背景
HTML5标准在今年的10月28号正式发布,这一新标准使得基于互联网,移动互联网的应用开发具备了统一的格式,从此不再区分版本和终端。这
极大的节省了开发时间以及成本。这是HTML5引起众多开发人员兴趣的原因之一。
此外,HTML5的出现,将是Web开发技术的一次重要飞跃。它不仅能够使得网页具备更加强大,绚丽的功能。而且,还改变了互联网的许多方面。譬如,降低插件的使用、支持动态生成图像、允许Wed程序利用本地存储、简化Web开发的数据提取、支持位置服务,让Web播放更加流畅等。这完美的解决了之前的好多问题。如,网站的推广不再受到大部分插件的制约。当用户无法上
网的时候,仍然可以使用缓存文件完成一些功能。当然用户体验也得到大大提升。
HTML5也迎合了现代人的需求。因为,现在的生活节奏快,网络用户更偏向喜欢标题、图片、视频,等形式。它们可以更加直接快速的让人们达到阅
读目的。我们也希望网页变得更加动态有趣,提供更多的互动机会。
HTML5的发展前景将非常广阔,学习HTML5的时候到了。
1.2研究意义
首先,HTML5使得用户可以通过不同的终端设备访问相同的程序以及基于云的内容。这样我们在创建网站的时候将不再需要考虑不同终端,不同版本带来的
问题。既节省了开发时间,又节省了开发成本。
其次,HTML5新增的一些功能,可以使我们的网站变得更加强大,美观。企业能够成功的推广自己,在很大程度上会依赖于网站的合理设计。
1.3国内外研究现状
在国外,HTML5这一新标准,受到许多业内巨头的追捧。谷歌、苹果等把它形象的描述为用户体验的未来,微软的IE9中也加入了对h tml5的大量支持。到2012年11月,支持HTML5的普及率就已经达到66%。
相比,国内的普及率要低些。主要原因在于,国内操作系统的更新速度较慢。但是,HTML5标准在国内的普及速度很快。目前大部分技术人员已经开始尝试着在各类网站中应用更多HTML5的新特性,这将会为互联网带来新面貌。
2.关键技术介绍
2.1 HTML5
2.1.1 HTML5的概念
狭义的HTML5,就是HTML 语言的第五版,即最新版本。相对于HTML4,这个新版添加了一些新的元素,这些新的元素一部分是为了让网页更加合理,另一部分是为了添加新的功能。里面最受欢迎的是<canvas> 和<video>,<canvas>可以为网页添加绘图功能,<video>可以为网页加入原生的视频支持。
广义的 HTML5,还包括CSS3 以及 JavaSc ript的更多接口。我们把下一代网页技术统称为 HTML5。
2.1.2 HTML5主要新增功能及特性介绍
HTML5主要在速度、存储、位置、图像等方面进行了优化。
(1)内容标签优化
HTML5之前版本的内容标签,它们的级别相同,不利于很好的区别
各部分内容。如:<div id=”header”>、<div id=”footer”>、<div id=”conte
n t”>。相对的,HTML5的标签,级别不同,各种统计软件以及搜索引
擎都可以快速识别出各部分内容。如:<footer>、<header>、<conten t>,
这样的标签,使得页面的布局更加清晰明了。
(2)表格体系优化
现在只需要用H TML5,就可以做出功能强大的表格。你可以通过一
个简单的设置,来定义表格中每一个单元格的输入格式,如日期格式
等等。当然你也可以设置某一项是否为必填项目。之前,要实现这样
的功能,是需要借助J S,或者PHP才能实现的。
(3)新增Canvas API
目前大部分网页都不能为用户提供直接在网页上绘图的功能,即使是简单的几何图都不能实现。与图片的交互也是非常局限的,大多数只是简单的保存和点击。想要实现在网页上绘图或者希望对图片实现更多的交互操作,就需要借助f lash等插件来实现。
HTML5新增的can v as元素可以让用户使用Jav aScri pt 在网页上绘制图像。一个canv as 元素就像是一块画布,画布是一个矩形区域,可以控制画布上的每个像素。也可以使用S V G和Ma thML在网页上绘图,呈现矢量图形和复杂的数学公式。
我们可以想象,随着技术的不断发展,我们有可能实现在线绘图,不再需要安装那些基本的绘图软件。与此同时,我们也可以实现,收集和生成用户鼠标在网页中经过的轨迹,进而分析我们的网站设计是否合理,该如何优化。以求不断提高用户体验。
(4)音视频API
使用HTML5就可以直接对,音频、视频进行整合。与此同时,HTML5
提供了一整套功能强大的A PI ,用来控制音视频的播放。这丰富了
对媒体播放的控制。
(5)存储(离线网络应用程序——文件缓存)
目前Web应用非常广泛,分析其优势,在于,它不需要安装,且需要占用的内存很小。要想使用WE B,就必须在一个有网络信号的地方。但是,目前网络信号不能够覆盖所有的地方。这给我们带来了极大的不便。也成为制
约w e b 的一大问题。
HTML5的新增功能——离线存储,完美的解决了这一问题。其原理是,HTML5的W eb storag e API采用了离线存储,就能够生成一个清单文件,该清单文件由一系列的U RL列表文件组成,这些URL分别指向,如CSS文件、JS文件、图片、视频等。(这些文件在用户浏览相关页面的时候已被缓存到客户端)当用户无法上网的时候,仍然可以使用这些文件完成一些功能。
用户在离线时的一些更改,也会被记录到这个清单中。重新连线之后,就会自动将更改返回到应用当中。
HTML5的离线存储功能,也完美的代替了cook i es。Cookie s一直用于将网站密码缓存到本地,当需要时将密码信息发送到服务器。它存在很大的缺陷,就是密码信息会被反复的在本地和服务器间传输。这不仅增加了信息安全的风险,也占用了带宽。W eb storag e API 支持4M以上的空间作为缓存,
不在将信息反复得在本地和服务器间传输。只是传输一些必须的文件。这样一些个人信息将更加安全,同时也节省了带宽。
(6)速度
Web Worker s 让JavaSc ript可在后台多线程运算,XMLHtt pRequ est 2 能让Ajax 请求提速,都是为网页程序提速的。
(7)利用Geolocati on API获取地理位置信息
在万维网中,人们只知道某台电脑的I P地址,却无法知道那些数据所对应的PC所处的真实位置。最新版本的H TML5支持位置服务,它通过提供应用接口——Geoloc ation API,来共享自己的地理位置信息。
简要说明Geoloca tionAPI所具备的特性:
(1)本身不去获取位置信息,而是通过如I P、WIFI、GPS等第三方来获取
(2)用户可以随时开启或者关闭这个功能,并且在程序调用位置信息之前会先征得用户的同意,这样就可以很好的保护用户的隐私。
(8)新增WebSocke协议,节省宽带资源,实现实时通信
目前,绝大多数网站为了能过做到即时通讯,都用到一种叫做轮询的技术。简单来说,轮询就是每隔一小段固定的时间,浏览器就会对服务器发出请求,服务器收到请求之后,就会将最新的数据返回到浏览器端。当然,浏览器
需要不断的发出H TTP request,才能够真正的实现即时通讯。这样就带来一个很大的问题,就是占用了太多的宽带资源以及服务器资源。
svg和canvas的区别HTML5推出以后,新增了. WebSoc ket API。WebSoc ket API可以实现浏览器与服务器端的握手动作。之后,就形成了We bSock et通道,它可以实现数据的传输。客户端与之间的交换的数据信息量非常小。而且,服务器可以做到主动向浏览器发送最新的信息。与之前的轮询技术相比,有了很大的及进步。
2.2Javas cript
2.2.1Javas cript概述
我们都知道J S是一种脚本语言,它的代码是可以直接嵌入到网页中的,不需要编译。这意味着JS不需要大量的代码就可以实现我们想要的功能。JS与Ja v a这种编程语言相比较,编写环境要宽松的很多。
它非常适合那些WEB设计人员,因为他们只是想要为网页天剑一些简单的动画。需要明确的一点,是JA V A和JS是两种完全无关的语言。
2.2.2jQuer y了解
jQuery是一个JS库,它是对JS的封装。当我们需要J S实现某一功能时,我们可以简单地从类库中调用现有的j Query,这大大缩减了编程人员时间上的花费,同时也降低了编程的难度,与此同时,代码的精简,也让后期的维护变得更加容易。
2.2.3DOM
DOM是一种,用于表示文档元素的方法。这种方法可以使得HTML页面中所有元素的信息传递到J S中,并进行处理。需要明确的一点是,DOM表示内容的原始结构。网页内容加载之前,必然会先加载D OM。
2.3 canvas的初步认识
在HTML5代码中天剑c anva s标签,实际上,就是在网页中添加了一块巨型的画布,画布的默认大小为300*150,当然,它的大小是可以控制的。
Canvas需要配合J S来完成各种图形的绘制。目前HTML5正在被大部分浏览器支持,所以我们研究c anva s是非常有必要的。
2.4 canvas与flash的对比
2.4.1要想在网页上观看通过FLASH制作的动画,就必须安装F LASH插件。
HTML5新增的can v as元素可以让用户使用Jav aScri pt 在网页上绘制图
像。一个canv as 元素就像是一块画布,画布是一个矩形区域,可以控
制画布上的每个像素。它不需要任何外部插件,只要浏览器对HTML5
是支持的,我们就可以在网页中直接做出想要的图像或者动画。
2.4.2Flash的脚本相对来说,是比较简单的。即使你不够专业,也能够看得
懂。但是,要想利用ca nvas来绘制图形、图像、动画,就需要开发人员
对相应的技术有较深的理解。
2.4.3Flash的出现以及发展要早于c anvas,它的封装性自然要更成熟一些。
2.4.4 canvas相对于fla sh 更利维护。网页以对象的形式来插入Flash动画,
只有其设计者才能够知道它具体的内部特点。因此网页的设计者,只
能够做到简单的插入,而不能根据自己的想法,对其做出适当的更改。
而canva s 的本质就是一个HTML5元素,所以对can v as的操作就像对
网页中其他元素的操作。
2.4.5最后,canvas和flash都可以跨平台开发。
2.5 目前canv as主要的应用方向
2.5.1 canvas在网游的图形设计中具有非常大的潜力,这是有目共睹的。2.5.2 移动设备的b anner广告,可以用can v as实现很好的效果
2.5.3 可以实现,对文字的简单渲染
2.5.4 网站的开发人员可以利用c anva s技术更好地做到基于网络的数据传输2.6 canvas与SVG绘图技术的对比
首先对SVG进行简单的介绍,SVG是可伸缩矢量图形的英文简称。它是一种使用X ML的语言,用来描述二位图形以及绘图程序。与canva s相同的一点就是,它们都是用在客户端的工具,与用在服务器端的其他技术相比,是很强大的。因为他不需要数据在服务器端和客户端来回传输。这就有效的节省可宽带资源以及服务器资源。同时也大大提高了绘图的效率。它与canvas的不同点研究。
(1)canvas是位图,而SVG是矢量图,即它是根据图形的几何特征画出来的。所以当图像放大是,canvas图像会失真,而SVG不会。在不同的情况选择不同绘画技术。
(2)从搜索引擎的角度来看这两种技术,SVG能够被搜索引擎识别,而canv a s不能。单从这方面来考虑,SVG可能要优于can v as.
(3)SVG与DOM API结合使用,可以构成一个矢量的绘图A PI。相对的,canvas并不属于网页中的DOM结构,因此它需要画布中的坐标轴来定位。
综上,与SVG相比,CANV AS任然具有很多不足之处。虽然它出现的较晚,但是它也有自身的优势。例如,CANV AS不会存储画布中的对象。当然,也就不需要添加大量的D I V了,这样能够使得HTML代码更加清晰,简洁。设计人员在维护起来,也更轻松了。最后,CANV AS掌握起来较为容易一些。
3.canvas的高级功能
3.1深入理解绘图状态的保存和恢复
在研究绘图状态保存和恢复原理之前,需要先明确一个名词的具体含义,即绘图状态。它指的是在某一个瞬间,画布中用2D渲染的上下文外观的一整套属性值。接下来,我们将在一个实例的基础上,研究绘图状态的保存于恢复。
实例代码如下:
var canvas=$("myCanv as");
var contex t=canvas.get(0).getCon text("2d");
contex t.fillSt yle="rgb(255,0,0)";
contex t.save();
contex t.fillRe ct(50,50,100,100); //红正方形
contex t.fillSt yle="rgb(0,0,255)";
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论