专注于前端开发
我们一直未放弃

关于陀螺仪 deviceorientation 详解

检测

if (window.DeviceOrientationEvent) {
    //  支持DeviceOrientation API写在这里
} else {
    console.log("对不起,您的浏览器还不支持Device Orientation!!!");
}

使用

window.addEventListener('deviceorientation', function(event) {
  // 以设备坐标系z轴为轴,旋转alpha度。alpha的作用域为(0, 360)
  // 以设备坐标系x轴为轴,旋转beta度。beta的作用域为(-180, 180)
  // 已设备坐标系y轴为轴,旋转gamma度。gamma的作用域为(-90, 90)
  console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
});

设备沿Z轴逆时针旋转,Alpha(α)值增加

设备沿Y轴逆时针旋转,Gamma(γ)值增加

注意

手机Y轴和电脑Y轴方向相反

特别注意: window.DeviceMotionEvent有定义,不触发 devicemotion 的话,请使用https协议!

卓迅设计-web前端开发-前端技术开发 » 关于陀螺仪 deviceorientation 详解

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址