关于陀螺仪 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);
});

clipboard.png

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

设备沿X轴顺时针旋转,Beta(β)值增加
clipboard.png

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

注意

手机Y轴和电脑Y轴方向相反
clipboard.png

阅读 4.2k

幸运儿的前端打怪升级手册
I am not a designer nor a coder. I'm just a guy with a point-of-view and a computer.
916 声望
139 粉丝
0 条评论
你知道吗?

916 声望
139 粉丝
宣传栏