前言
现在很多H5页面都会使用到类似摇一摇等功能，这其实只是应用了HTML5上的传感器api的其中一部分，以下针对自己学习和使用做了个总结，以做备忘和分享。
Device API
w3c定义了很多传感器的API，有很多还在草案阶段，兼容性和可用性不是很高，但在可预见的未来，相信这些强大的API可以让HTML5更加强大，实现更多原来在native APP上才能实现的功能、应用。
"未来"的传感器事件
| DOM Sensor Event | Sensor Type | Data Type | Units |
|---|---|---|---|
| devicetemperature | A ambient temperature sensor | double | degree Celsius (ºC) |
| devicepressure | A pressure sensor | double | kiloPascal (kP) |
| devicehumidity | A releative humidity sensor | double | percentage |
| devicelight | A light sensor | double | Lux |
| devicenoise | A ambient noise sensor | double | dbA |
| deviceproximity | A proximity sensor | double | centimetres (cm) |
w3c规定了设备传感器可以通过事件来触发访问数据，例如光线传感器通过以下方式获取数据：
if('ondevicelight' in window) { window.addEventListener("devicelight", function(event) { //light level is returned in lux units console.log(event.value + " lux"); });}if('onlightlevel' in window){ window.addEventListener("lightlevel", function(event) { //light value can be dim, normal or bright console.log(event.value); });} 常用的传感器事件
目前最常用的就是基于手机陀螺仪的重力传感器，通过它可以实现摇一摇、赛车游戏、惯性导航等应用。
deviceorientation 提供设备的物理方向信息，表示为一系列本地坐标系的旋角。
devicemotion 提供设备的加速信息，表示为定义在设备上的坐标系中的α坐标。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。
以下是w3c解释重力感应器时的经典示意解释：
（坐标系遵循右手定则，单位是角度。P.S. Firefox中是弧度）设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360)。
 |  |
|---|---|
| 设备在初始位置,地球（XYZ）和机身（xyz）对齐(即水平放置，顶端向北，屏幕朝上)。 | 设备围绕z轴的旋转角度为α,并与先前的x和y轴位置对比，显示x，y轴新坐标为x0和y0。 |
设备围绕x轴的旋转角度为β,β角度的取值范围在(-180,180)。
设备围绕x轴的旋转角度为β,并与先前的y和z轴的位置对比，显示y，z轴新坐标为y0和z0。
设备围绕y轴的旋转角度为γ,γ角度的取值范围在(-90,90)。
设备围绕y轴的旋转角度为γ,并与先前的x和z轴的位置对比，显示x，z轴新坐标为x0和z0。
使用方法
注册一个deviceorientation事件的接收器：
window.addEventListener("deviceorientation", function(event) { // 处理event.alpha、event.beta及event.gamma }, true); 将设备放置在水平表面，屏幕顶端指向西方，则其方向信息如下：
{ alpha: 90, beta: 0, gamma: 0 }; iOS 和 Android 两家系统对于手机硬件提供 alpha 数值不尽相同，如果在iOS上会有webkitCompassHeading，webkitCompassHeading表示「手机与地球正北方的夹角」，而 Android 则直接用 alpha 即可。( 不过如果不是 Chrome 又不尽相同，反正如果不同，就是在进行角度的加减即可)。另外github上有个库将不同的手机的参数统一了，可以使用。
为了获得罗盘指向，可以简单的使用360度减去alpha。若设被平行于水平表面，其罗盘指向为(360 - alpha)。 若用户手持设备，屏幕处于一个垂直平面且屏幕顶端指向上方。beta的值为90，alpha和gamma无关。 用户手持设备，面向alpha角度，屏幕处于一个垂直屏幕，屏幕顶端指向右方，则其方向信息如下：
{ alpha: 270 - alpha, beta: 0, gamma: 90 }; 注册一个devicemotion事件的接收器：
window.addEventListener("devicemotion", function(event) { // 处理event.acceleration、event.accelerationIncludingGravity、 // event.rotationRate和event.interval }, true); 将设备放置在水平表面，屏幕向上，acceleration为零，则其accelerationIncludingGravity信息如下：
{ x: 0, y: 0, z: 9.81 }; 设备做自由落体，屏幕水平向上，accelerationIncludingGravity为零，则其acceleration信息如下：
{ x: 0, y: 0, z: -9.81 }; 将设备安置于车辆至上，屏幕处于一个垂直平面，顶端向上，面向车辆后部。车辆行驶速度为v，向右侧进行半径为r的转弯。设备记录acceleration和accelerationIncludingGravity在位置x处的情况，同时设备还会记录rotationRate.gamma的负值：
{ acceleration: {x: v^2/r, y: 0, z: 0}, accelerationIncludingGravity: {x: v^2/r, y: 0, z: 9.81}, rotationRate: {alpha: 0, beta: 0, gamma: -v/r*180/pi} }; 简单的摇一摇实现：
if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); var speed = 30;//speed var x = y = z = lastX = lastY = lastZ = 0; function deviceMotionHandler(eventData) { var acceleration =eventData.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) { //简单的摇一摇触发代码 alert(1); } } lastX = x; lastY = y; lastZ = z; }