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)";//箭头旋转
    }
}

你可能感兴趣的:(HTML5指南针)