第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 最终方向