HTML5指南针
deviceOrientation & deviceMotion
以上为HTML5的提供的两种接口
- 摇一摇功能(DeviceMotion)
- 重力感应方向控制/指南针(DeviceOrientation)
重力感应与罗盘 DeviceOrientation
当浏览器的Orientation发生变化时,触发DeviceOrientation事件,并返回一个DeviceOrientationEvent对象,属性如下:
- alpha:设备的指示方向,根据指南针的设定情况而定
- beta:设备围绕X轴旋转的角度
- gama:设备围绕Y轴旋转的角度
工作原理
根据event对象的三个方向的参数来确定设备的旋转角度:
- alpha的取值范围是0-360,一般来说,设备指向正北方向时为0。
- beta值为设备绕x轴旋转的角度,取值范围为-180-180。
- gamma取值范围-90-90.
当屏幕从水平沿y轴向左倾斜时gamma值变为负值,向右倾斜变为正值。
档屏幕从水平沿x轴向前倾斜时beta值变为正值,向后倾斜时变为负值。
实现指南针demo
首先为浏览器绑定deviceorientation事件和处理程序
//add deviceorientation event listener
if(window.DeviceOrientationEvent){//返回一个DeviceOrientationEvent对象
window.addEventListener('deviceorientation',DeviceOrientationHandler,false);///添加监听事件
}else{
alert("您的浏览器不支持DeviceOrientation");
}
function DeviceOrientationHandler(event) {
alpha = event.alpha; //Z轴方向
var beta = event.beta,//X轴方向
gamma = event.gamma;//Y轴方向
if (alpha != null) {
arrow.style.webkitTransform = "rotate(" + alpha + "deg)";//箭头旋转
}
}