第11章 HTML5未来展望

11.1 HTML5的浏览器支持情况

11.2 HTML未来的发展

11.2.1 WebGL

       WebGL是针对Web上3D图像的API。WebGL使用的同样是canvas元素，只不过获取的是3D上下文。

       1.3D HTML

       与其他HTML5元素一样，WebGL将会成为Web平台不可或缺的一部分。因为WebGL通过canvas元素来渲染，所以它属于document对象。你可以向操作图像或2D canvas那样，在页面3D canvas元素中应用定位和变换。

       2.3D着色器

       WebGL是OpenGL ES 2与javaScript的结合，因此，它可以使用OpenGL中标准化的编程图形管道，包括着色器（shader）。着色器可将高度灵活的渲染效果应用于3D场景，让显示效果更真实。WebGL着色器是用GLSL（GL Shading Language，GL着色语言）编写的，这是Web中有一种新的专用语言。HTML5的WebGL应用程序使用HTML搭建框架，用CSS控制样式，用Javascript处理逻辑，用GLSL进行着色。

       WebGL可以当做是Web 3D图形的基础曾。与对DOM进行抽象并提供若干强大功能的JavaScript库类似，有一些库以WebGL为基础，提供了若干额外功能。

11.2.2 设备

       Web应用很可能需访问多种硬件，如网络摄像头、麦克风或是已连接的存储设备。为此，HTML5设计了device元素，以便让应用程序访问所连接硬件的数据流。

11.2.3 音频数据API

       可编程的音频API与<audio>的关系类似于<cavas>与<img>间的关系。

11.2.4 视频元素改进

11.2.5 触摸屏设备事件

       1.方向事件

       方向事件是移动设备中最简单的事件。它可以加入到页面body标签中：

       《body onorientationchange=”rotateDisplay();”>

       在方向事件处理程序中，可以引入window.orientation属性。该属性可选的值如表11-1所示。它们以页面首次加载时设备的方向为基准。

       表11-1方向值及其含义

方向值	含义
0	页面当前方向与首次加载时的原始方向一样
-90	与原始方向相比，设备顺时针选择了90度（向右）
180	与原始方向相比，设备旋转了180度（垂直翻转）
90	与原始方向相比，设备逆时针旋转了90度（向左）

       2．手势事件

       移动设备支持的另一种事件相对高级一些，称为手势事件。手势世家可以理解为通过多点触摸引发的缩放或旋转。当用户有两个或多个手指同时在触摸屏上挤压（pinch）或扭转（twist）时，就会触发手势事件。扭转表示旋转，挤压（pinch in）和伸展（pinch out）分别表示缩小和放大。为了接收到手势事件，代码中需要注册表11-2中所示的事件处理程序。

       11-2  手势事件处理程序

事件处理程序	描述
ongesturestart	用户将多个手指放在触摸屏上，并开始滑动
ongesturechange	用户正在使用手指动作进行缩放或是旋转操作
ongestureend	用户移开手指，缩放或旋转操作已经完成

3.触摸事件

如果需要在低层次上处理设备事件，可以通过触摸事件获取所需信息。

事件处理程序	描述
ontouchstart	已经在触摸设备表明放置了一个手指。当多个手指放在设备上时，会发生多点触摸事件
ontouchmove	在拖动操作中，一个或多个手指发生了移动
ontouchend	一个或多个手指离开设备表面
ontouchecancel	意外中断停止了触摸操作

1.2.6 P2P网络

11.2.7 最终方向