关于js陀螺仪的理解分析


Posted in Javascript onApril 11, 2019

检测设备方向

监听 deviceorientation

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

event中包含以下几个值

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

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

  • alpha
  • beta
  • gamma
  • absolute

手机轴线如图:

关于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的说明

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
Move.js入门
Feb 08 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 #Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 #Javascript
vue实现新闻展示页的步骤详解
Apr 11 #Javascript
记一次用vue做的活动页的方法步骤
Apr 11 #Javascript
vue数据初始化initState的实例详解
Apr 11 #Javascript
Vue起步(无cli)的啊教程详解
Apr 11 #Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 #Javascript
You might like
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
php统计数组元素个数的方法
2015/07/02 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
vue子父组件通信的实现代码
2017/07/09 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
介绍Python的Django框架中的QuerySets
2015/04/20 Python
详解Python编程中time模块的使用
2015/11/20 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
python3.5的包存放的具体路径
2020/08/16 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
网吧七夕活动策划方案
2014/08/31 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2015年财务部工作总结
2015/04/10 职场文书
国庆节新闻稿
2015/07/17 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python