文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

js陀螺仪的示例分析

2024-04-02 19:55

关注

这篇文章主要为大家展示了“js陀螺仪的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js陀螺仪的示例分析”这篇文章吧。

检测设备方向

监听 deviceorientation

window.addEventListener("deviceorientation", handleOrientation, true);

event中包含以下几个值

属性描述
type事件的类型。
bubbles事件是否正常起泡
cancelable该活动是否可以取消?
alpha设备绕Z轴的当前方向; 也就是说,设备围绕垂直于设备的线旋转多远。
beta设备围绕X轴的当前方向; 也就是说,设备向前或向后倾斜多远。
gamma设备绕Y轴的当前方向; 也就是说,设备向左或向右转动多远。
absolute如果方向是作为设备坐标系和地球坐标系之间的差异提供的,则该值是该值; 如果设备无法检测到地球坐标系,则此值为false。

需要重点关注这四个返回值

手机轴线如图:

js陀螺仪的示例分析

一、理解alpha

alpha 是设备绕Z轴的方向

它的取值范围在0到360度之间。当设备顶端指向正北方向时,该属性的取值为0。

即:围绕垂直手机屏幕的轴转动

如图:

js陀螺仪的示例分析

二、理解beta

beta 是设备绕X轴的方向

它的取值范围在-180到180度之间。当设备与地球表面保持平行时,该属性的取值为0。

即:围绕平行音量键的轴转动

如图:

js陀螺仪的示例分析

三、理解gamma

gamma 是设备绕Y轴的方向

它的取值范围在-90到90度之间。当该设备与地球表面保持平行时,该属性的取值为0。

即:围绕平行充电口的轴转动

如图:

js陀螺仪的示例分析

四、理解absolute

absolute 是用来判断是否是地球坐标系。

如果当前设备坐标系与地球坐标系相对应,则返回true,

否则返回false;

返回值为true时候,可以进行使用其他坐标系作为基准

总结

  alpha => 围绕垂直手机屏幕的轴转动
  beta  => 围绕平行音量键的轴转动
  gamma => 围绕平行充电口的轴转动

  absolute => 返回是否与地球坐标系相对应

示例代码:

if (window.DeviceOrientationEvent) {
 window.addEventListener("deviceorientation", function(event) {
  // alpha: 围绕垂直手机屏幕的轴转动的旋转角度
  var rotateDegrees = event.alpha;
  // gamma: 围绕平行充电口的轴转动的旋转角度
  var leftToRight = event.gamma;
  // beta: 围绕平行音量键的轴转动的旋转角度
  var frontToBack = event.beta;

  handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
 }, true);
}

var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
 // 弹奏一曲夏威夷吉他
};

对于浏览器兼容性方面 可以在使用时候参照MDN的说明

以上是“js陀螺仪的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯