html5 获取 陀螺仪,重力感应(转发)

DeviceOrientationEvent是获取方向,得到device静止时的绝对值;
    DeviceMotionEvent是获取移动速度,得到device移动时相对之前某个时间的差值比

设备定位API,该API允许你收集设备的方向和移动信息。此外,该API只在具备陀螺仪功能的设备上使用。

<html>

<head>
<title>DeviceOrientationEvent</title>
<meta charset="UTF-8" />
</head>

<body>
<p>左右:<span id="alpha">0</span>
</p>
<p>前后:<span id="beta">0</span>
</p>
<p>扭转:<span id="gamma">0</span>
</p>
<p>指北针指向:<span id="heading">0</span>度</p>
<p>指北针精度:<span id="accuracy">0</span>度</p>
<hr />
<p>x轴加速度:<span id="x">0</span>米每二次方秒</p>
<p>y轴加速度:<span id="y">0</span>米每二次方秒</p>
<p>z轴加速度:<span id="z">0</span>米每二次方秒</p>
<hr />
<p>x轴加速度(考虑重力加速度):<span id="xg">0</span>米每二次方秒</p>
<p>y轴加速度(考虑重力加速度):<span id="yg">0</span>米每二次方秒</p>
<p>z轴加速度(考虑重力加速度):<span id="zg">0</span>米每二次方秒</p>
<hr />
<p>左右旋转速度:<span id="Ralpha">0</span>度每秒</p>
<p>前后旋转速度:<span id="Rbeta">0</span>度每秒</p>
<p>扭转速度:<span id="Rgamma">0</span>度每秒</p>
<hr />
<p>上次收到通知的间隔:<span id="interval">0</span>毫秒</p>

<script type="text/javascript">
function orientationHandler(event) {
document.getElementById("alpha").innerHTML = event.alpha;
document.getElementById("beta").innerHTML = event.beta;
document.getElementById("gamma").innerHTML = event.gamma;
document.getElementById("heading").innerHTML = event.webkitCompassHeading;
document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy;

}

function motionHandler(event) {
document.getElementById("interval").innerHTML = event.interval;
var acc = event.acceleration;
document.getElementById("x").innerHTML = acc.x;
document.getElementById("y").innerHTML = acc.y;
document.getElementById("z").innerHTML = acc.z;
var accGravity = event.accelerationIncludingGravity;
document.getElementById("xg").innerHTML = accGravity.x;
document.getElementById("yg").innerHTML = accGravity.y;
document.getElementById("zg").innerHTML = accGravity.z;
var rotationRate = event.rotationRate;
document.getElementById("Ralpha").innerHTML = rotationRate.alpha;
document.getElementById("Rbeta").innerHTML = rotationRate.beta;
document.getElementById("Rgamma").innerHTML = rotationRate.gamma;
}

if (window.DeviceMotionEvent) {
window.addEventListener("devicemotion", motionHandler, false);
} else {
document.body.innerHTML = "What user agent u r using???";
}

if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", orientationHandler, false);
} else {
document.body.innerHTML = "What user agent u r using???";
};
</script>
</body>

</html

html5 获取 陀螺仪,重力感应(转发)

时间: 2024-10-17 02:12:45

html5 获取 陀螺仪,重力感应(转发)的相关文章

HTML5+ 获取手机重力感应 ( 三个方向的加速度 )

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>手机重力感应</title> <script type=&q

HTML5 重力感应效果,实现摇一摇效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detect

HTML5重力感应小球冲撞动画实现教程

今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的效果,并且在运动过程中模拟了重力感应的物理效果.你可以在DEMO演示中来尝试一下. 你也可以在这里查看在线演示 接下来我们来分析一下这款超酷的HTML5重力动画实现的思路及源码,主要由HTML代码和Javascript代码组成. HTML代码: <div id="canvas">

H5案例分享:html5重力感应事件

html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转角度为α,并与先前的x和y轴位置对比,显示x,y轴新坐标为x0和y0. 2.设备围绕x轴的旋转角度为β,β角度的取值范围在(-180,180). 设备围绕x轴的旋转角度为β,并与先前的y和z轴的位置对比,显示y,z轴新坐标为y0和z0. 3.设备围绕y轴的旋转角度为γ,γ角度的取值范围在(-90,9

移动端html5重力感应

下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/     http://06wjin.sinaapp.com/billd/test.html 重力感应主要用到两种事件: 1 orientationchange 这个事件在屏幕发生翻转时触发 window.orientation可获得设备的方向,一共有三个值0:竖直,   90:右旋,   -90:左旋 2 deviceorientation 和 MozOrientation(fi

理解手机中的感应器模块:重力感应/光线感应/电子罗盘/陀螺仪模块功能

在用js里的deviceorientation事件写翻转手机屏幕的demo,iphone和同事的安卓都可以,就我的酷派f1不行. 记得以前也玩过重力感应的游戏,于是上网查了一下酷派大神f1的感应器模块配置参数: 看完后知道orientationchange翻转屏幕事件应该用到了重力感应,deviceorientation应该跟陀螺仪有关. 网上找了点这些模块的说明,分享给大家: 重力感应 重力感应器算出现比较早的手机传感器.现在,大多数主流智能机都装有这个配置.在iOS.Android平台中,很

进阶一之Android重力感应(一)

书山有路勤为径,学海无涯苦作舟. 本讲内容:Android重力感应 下面是三轴方向 android重力感应系统的坐标系以屏幕的左下方为原点([注意]2d编程的时候,是以屏幕左上方为原点的),箭头指向的方向为正.从-10到10,以浮点数为等级单位,想象一下以下情形: 手机屏幕向上(z轴朝天)水平放置的时侯,(x,y,z)的值分别为(0,0,10); 手机屏幕向下(z轴朝地)水平放置的时侯,(x,y,z)的值分别为(0,0,-10); 手机屏幕向左侧放(x轴朝天)的时候,(x,y,z)的值分别为(1

[转]Android重力感应开发

http://blog.csdn.net/mad1989/article/details/20848181 一.手机中常用的传感器 在Android2.3 gingerbread系统中,google提供了11种传感器供应用层使用,具体如下:(Sensor类) #define SENSOR_TYPE_ACCELEROMETER 1 //加速度#define SENSOR_TYPE_MAGNETIC_FIELD 2 //磁力#define SENSOR_TYPE_ORIENTATION 3 //方向

【Android开发日记】初次探秘Android Service!Service开机启动+重力感应+弹窗+保持运行

前言: 最近在写一个小程序,需求是手机摇一摇就弹窗出来.第一次使用了Service,学习了两天,实现了Service弹窗,开机启动,Activity启动和销毁.满足了自己的需求.现记录学习心得.希望能给你带来一些帮助. 1.Service创建:重写4个方法 onBind():返回一个IBinder对象,这个对象可以使应用程序与Service通信.如果用startService.stopService启动和关闭Service的话,Service和访问者是无法通信交换数据的.onBind()返回值设