基于webGL和HTML5的网页3D动画的设计与实现.doc

基于webGL和HTML5的网页3D动画的设计与实现.doc基于webGL和HTML5的网页3D动画的设计与实现摘要:,对网页中的三维可视化图像进行实现,讲述了基于webGL和HTML5的应用程序回调函数的具体用法与实现,并通过具体的应用实例验证了设计的正确性。关键字:webGL;JavaScript;;HTML5 中图分类号:TP311文献标识码:A文章编号:1009-3044(2011)28-6981-03 Web-3DanimationDesignandImplementationBasedonwebGLandHTML5 TANWen-wen,DINGShi-yong,LIGui-ying (ShandongUniversityofScienceandTechnology,Qingdao266071,China) Abstract:Inthispaper,,andshowsthecorrectnessofthedesignthroughanapplicationexample. Keywords:webGL;JavaScript;;HTML5 WebGL是一种3D绘图标准,,,WebGL可以为HTML5Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。 HTML5将成为HTML、XHTML以及HTMLDOM的新标准。HTML的上一个版本诞生于1999年。自从那以后,Web世界已经经历了巨变。HTML5仍处于完善之中。然而,大部分现代浏览器已经具备了某些HTML5支持[4]。 1程序设计中所引用的关键技术介绍 HTML5的canvas元素使用JavaScript在网页上绘制图像。相当于画布,它是一个矩形区域,您可以控制其每一像素,canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们可以通过下面语句创建并规定canvas元素的id、宽度和高度: canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成: varc=("myCanvas"); varcxt=("2d"); ="#FF0000"; (0,0,150,75); 上述这段语言完成了在canvas中绘制一个红色的矩形。 WebGL中引用了Open