html5调用手机陀螺仪实现方向辨识
获取移动设备的陀螺仪，需要知道陀螺仪包含什么。
我们可以让document监听deviceorientation 来获取相关的数据，里面包括3个值 alpha、beta和gamma。
这三个值分别代表：
（1）alpha：
移动设备水平放置时，绕z轴旋转的角度，数值为0度到360度。
（2）beta：
移动设备水平放置时，绕X轴旋转的角度，数值为-180度到180度。
（3）gamma：
移动设备水平放置时，绕Y轴旋转的角度，数值为-90度到90度。
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
alpha:<span id="alpha"></span><br/>
beta:<span id="beta"></span><br/>
gamma:<span id="gamma"></span><br/>
</body>
<script>
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function (event) {
var a = document.getElementById('alpha'),
b = document.getElementById('beta'),
g = document.getElementById('gamma'),
alpha = event.alpha,
beta = event.beta,
gamma = event.gamma; a.innerHTML = Math.round(alpha);
b.innerHTML = Math.round(beta);
g.innerHTML = Math.round(gamma); }, false);
} else {
document.querySelector('body').innerHTML = '你的浏览器不支持陀螺仪';
}
</script>
</html>
效果：
兼容：
兼容具体没有测试，ios和android两家的系统有一些区别，而且不同的内核也有一定的偏差。
判断是否是ios可以使用一个webkitCompassHeading属性来判断，ios上面会有这个属性，来表示 手机与地球正北方的夹角。
如果dom里面含有这个属性，我们就需要通过这个属性进行加减来计算出来当前所处于的地区的水平位置。
---------------------
本文来自 专注前端30年 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/qq_30100043/article/details/73323617?utm_source=copy
html5调用手机陀螺仪实现方向辨识的更多相关文章
- html5调用手机摄像头，实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- 怎样让HTML5调用手机摄像头拍照——实践就是一切
原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...
- HTML5调用手机摄像头,仅仅支持OPPOHD浏览器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【HTML5 】手机重力与方向感应的应用——摇一摇效果
http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...
- 使用HTML5+调用手机摄像头和相册
前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...
- HTML5调用手机摄像机、相册功能 <input>方法
最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能! 在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了 ...
- html5调用手机震动
在h5里面里面,浏览器对象有个vibrate属性.顾名思义,翻译过来就是震动的意思,这个api属性方法如下: 要调用的例子 if (window.navigator.vibrate) window.n ...
- html5调用手机摄像头
<input type="file" accept="image/*" capture="camera"><input t ...
- getUserMedia API及HTML5 调用手机摄像头拍照
getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...
随机推荐
- laravel 中间件
创建中间件命令 php artisan make:middleware CheckLogin 执行完以上命令会在app/Http/Middleware目录下创建一个新的中间件类CheckLogin.p ...
- poj2763树链剖分边权+区间和
自己写的比原来的板子常数小了不少嘻嘻,边权处理起来比点权要复杂一下 由于根节点没有被映射的边,其被访问到的顺序是0,直接排除在线段树外 #include<iostream> #includ ...
- linux命令: chown命令
chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷贝 ...
- 一篇笔记带你梳理JVM工作原理
首先要了解的 数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型. 基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了某个对象的引用, ...
- 《Java程序性能优化》之程序优化
这一部分主要介绍代码层的优化.了解如何编写高效而精炼的代码,正确的使用函数方法.1.字符串优化处理Java语言中,String对象可以认为是对char数组的眼神和进一步封装.它主要由3部分组成:cha ...
- python全栈开发day34-线程Thread
一.昨日内容回顾 1. 概念和理论 进程是计算机资源分配最小单位 进程三状态.同步.异步.阻塞.非阻塞 2. 进程的创建 实例化.自建类run,start,join,terminate,daemon等 ...
- 进程间通信（IPC）
1.什么是进程间通信 通俗来讲,进程间通信就是:多个进程之间的数据交互 进程都有自己独立的虚拟地址空间,导致进程之间的数据交互变得十分困难,通信复杂了,但是安全性提高了: 进程间通信的本质:多个进程之 ...
- Python数据可视化系列-02-pyecharts可视化非常cool
pyecharts介绍 pyecharts网站 Pyecharts生成的图像,动态效果非常cool.在HTML上展示很是perfect.matplotlib用于科研,但是pyecharts用于展示和讲 ...
- Python3练习题系列（01）
2018-06-13 题目: 根据用户回答做出相应的判断,完成一个“回答-判断”的小游戏 Python3知识点: if, else, elif 实例代码: print("You enter ...
- 潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)
CSS 的引入方法: 第一种 : <!--直接在标签仙设置--><p style="color: yellow">CSS的第一种引入方法</p> ...