javascript - h5 页面如何获取手机陀螺仪的参数

问题描述

问 题

做一个手机的h5页面，关于一个小球平衡的东西，手机浏览器如何获取手机底层的陀螺仪参数呢？
有没有想过的demo参考一下，谢谢

解决方案

有个检测设备方向的 API，可以在事件中获取设备 x、y、z 三个轴旋转角度，也许对你有用。
https://developer.mozilla.org/zh-CN/docs/Web/API/Detecting_device_orientation

补充：

在PC端测试模拟的话，可以用谷歌浏览器的模拟器。

我在控制台输入了以下代码，监听该事件。

window.addEventListener('deviceorientation', function(e){
   console.log('absolute: ' + e.absolute)
   console.log('alpha: ' + e.alpha)
   console.log('beta: ' + e.beta)
   console.log('gamma: ' + e.gamma)
});

切换为模拟器模式，随便选一个移动设备。然后按下图所示点进去，你会发现一个新的天地。

支持地理位置模拟和三轴角度模拟。

更改一些数值，控制台正确输出。

这篇关于javascript - h5 页面如何获取手机陀螺仪的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！