6.1 传感器API基础

本节将简单介绍HTML5针对移动设备提供支持的传感器API的基础知识。

6.1.1 认识传感器API

随着HTML5 API的不断完善，使用HTML5可以调用不同类型的设备传感器，如devicetemperature（温度）、devicepressure（压力）、devicehumidity（湿度）、devicelight（光）、devicenoise（声音）和deviceproximity（距离）等。

目前，HTML5提供了几个新的DOM事件，用来获取移动设备的物理方向和运动等相关信息，包括陀螺仪、罗盘和加速计。

deviceorientation：该事件提供设备的物理方向信息，表示为一系列本地坐标系的旋角。

devicemotion：该事件提供设备的加速信息，表示为定义在设备上的坐标系中的笛卡儿坐标，同时还提供了设备在坐标系中的自转速率。

compassneedscalibration：该事件会在用于获得方向数据的罗盘需要校准时触发。

2016年8月18日，W3C的地理位置工作组（Geolocation Working Group）发布设备方向事件规范（DeviceOrientation Event Speci fication）的候选推荐标准（Candidate Recommendation），并向公众征集参考意见。该规范定义了一些新的DOM事件，这些事件提供了有关宿主设备的物理方向与运动的信息。

该API从属于W3C Working Draft，也就是说相关规范并非最终确定，未来其具体内容可能还会出现一定程度的变动。注意，已知该API在多种浏览器以及操作系统可能出现不一致。例如，在基于Blink渲染引擎的Chrome与Opera浏览器上，该API会与Windows 8系统产生deviceorientation事件的兼容性冲突。另一个实例则是，该API的interval属性在Opera Mobile版本中并非恒定的常数。

6.1.2 方向事件和移动事件

在HTML5中，DeviceOrientation特性提供的DeviceMotion事件封装了设备的运动传感器时间，通过该时间可以获取设备的运动状态和加速度等数据，另外deviceOrientation事件提供了设备角度和朝向等信息。

首先，我们了解一下设备的方向变化和位置变化相关的概念，如图6.1标识了移动设备的3个方向轴。

图6.1 移动设备的3个方向轴

如图6.1所示，x轴表示左右横贯手机的轴，当手机绕x轴旋转时，移动的方向称为Beta；y轴表示上下纵贯手机的轴，当手机绕y轴旋转时，移动的方向称为Gamma；z轴表示垂直于手机平面的轴，当手机绕z轴旋转时，移动的方向称为Alpha，演示如图6.2所示。

图6.2 移动设备三种旋转方式

了解了基本的旋转方向，接下来介绍一下相关的事件方法。

1．方向事件deviceorientation

deviceorientation事件是在设备方向发生变化时触发，使用方法如下。

     window.addEventListener("deviceorientation", handleOrientation);

HTML5使用以上事件监听设备方向变化。回调函数handleOrientation注册后，会被定时调用，并会收到一个DeviceOrientationEvent类型参数，通过该参数获取设备的方向信息。

以上在定义的监听方法中通过event参数获取设备的对应Alpha、Beta和Gamma角度，参数定义如下。

DeviceOrientationEvent.absolute

DeviceOrientationEvent.alpha

DeviceOrientationEvent.beta

DeviceOrientationEvent.gamma

其中的相关值如下：

absolute：如果方向数据跟地球坐标系和设备坐标系有差异，则为true；如果方向数据由设备本身的坐标系提供，则为false。

alpha：设备Alpha方向上的旋转角度，取值范围为0~360°。

Beta：设备Beta方向上的旋转角度，取值范围为-180°~180°。

Gamma：设备Gamma方向上的旋转角度，取值范围为-90°~90°。

2．移动事件devicemotion

devicemotion事件是在设备发生位移时触发，使用方法如下：

     window.addEventListener("devicemotion", handleMotion);

回调函数handleMotion在注册之后，会被定时调用，并会收到一个DeviceMotionEvent类型参数，通过该参数可以访问设备的方向和位置信息，说明如下。

acceleration：设备在X、Y和Z方向上的移动距离。已经抵消重力加速。

accelerationIncludingGravity：设备在X、Y和Z方向上的移动距离，包含重力加速。

rotationRate：设备在Alpha、Beta和Gamma 3个方向上的旋转角度。

interval：从设备上获得数据的间隔，单位必须是毫秒。其必须是一个常量，以简化Web应用对数据的过滤。

对于不能提供所有属性的事件，必须将其位置的属性的值设为null。如果一个事件不能提供移动信息，则触发该事件时，所有属性都应被设为null。

6.1.3 浏览器支持

用户可以访问https://caniuse.com/#feat=deviceorientation了解浏览器的支持状态，也可以通过下面的代码检测浏览器或者用户代理是否支持deviceorientation和devicemotion事件。

测试compassneedscalibration事件，可以使用下面的代码。

6.1.4 应用场景

HTML5的DeviceOrientation API可以获取手机运动状态下的运动加速度，也可以获取手机绕X、Y和Z轴旋转的角度等。因此用户可以开发出很多应用场景，例如，下面是手机中比较常用的应用项目类型。

使用摇一摇才能触发的事件，如摇一摇得红包和摇一摇抽奖等。

设计全景图片的项目，如旋转手机可以看3D的全景图片等。

使用重力感应，如Web小游戏等。

获取手机的左右方向移动等。