`
haoningabc
  • 浏览: 1482189 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5 陀螺仪

阅读更多
<html>

<head>
<title>DeviceOrientationEvent</title>
<meta charset="UTF-8" />
<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>
</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>



</body>

</html>



pedestrian dead reckoning
分享到:
评论

相关推荐

    H5调用陀螺仪

    Device Orientation API是HTML5的一部分,它允许网页应用访问设备的运动传感器数据,包括陀螺仪、加速度计和磁力计。这些数据可用于创建丰富的交互式体验,如游戏、虚拟现实应用或导航系统。 2. **陀螺仪原理** ...

    陀螺仪图片旋转

    在Web环境中,实现上述功能可能需要JavaScript与设备陀螺仪数据交互,利用WebGL进行3D渲染,或者借助HTML5的DeviceOrientation事件来捕获设备运动信息。 总结来说,这个主题涵盖了陀螺仪传感器的使用、动态图片加载...

    three.js 全景手控和带陀螺仪效果

    全景手控和带陀螺仪效果是WebGL库three.js中的高级应用,主要涉及3D交互体验和移动设备的传感器集成。在这个项目中,我们利用three.js创建了一个360度全景视图,并且实现了用户可以通过手动操作或手机陀螺仪来改变...

    parallaxjs重力陀螺仪

    当与重力陀螺仪结合使用时,这种效果可以进一步增强,提供更真实的交互体验,尤其是在移动设备上。 1. **Parallax.js基本原理**: Parallax.js通过监听用户的滚动事件,调整不同层的元素位置,使它们在滚动过程中...

    基于 HTML5 和 Go 语言后端的,可将任意带陀螺仪的移动设备.zip

    这个压缩包文件的主题显然是关于使用 HTML5 和 Go 语言构建一个能够利用移动设备陀螺仪功能的应用。让我们深入探讨这两个关键技术和如何结合它们来创造创新的用户体验。 首先,HTML5 是 HTML 的最新版本,它引入了...

    一个基于 HTML5 和 Go 语言后端的,可将任意带陀螺仪.zip

    一个基于 HTML5 和 Go 语言后端的,可将任意带陀螺仪

    基于 HTML5 和 Go 语言后端的,可将任意带陀螺仪的移动设备变成控制电脑屏幕上光标的“空中鼠标”的前后端项目

    在本项目中,HTML5被用来构建用户界面,允许用户通过移动设备上的陀螺仪来操控电脑屏幕上的光标,实现了“空中鼠标”的功能。以下是对HTML5主要特性的详细阐述: 1. **语义化标签**:HTML5引入了如, , , , 等新的...

    gyroscope:陀螺仪

    HTML5中的陀螺仪功能是Web平台的一个重要进步,它允许网页应用访问设备的陀螺仪数据,从而创建更丰富的、响应式的用户体验。通过JavaScript API,开发者可以获取到实时的陀螺仪信息,包括三轴(X、Y、Z)的角速度值...

    magic-mouse:一个基于 HTML5 和 Go 语言后端的,可将任意带陀螺仪的移动设备(例如智能手机)变成控制电脑屏幕上光标的“空中鼠标”的前后端项目

    HTML5 网页能获取到移动设备的陀螺仪信息,可以利用这个信息控制屏幕上的鼠标移动。 计划 可行性验证 HTML5 能否获取陀螺仪信息( 陀螺仪信息处理 映射方式 1:计算角度和初始的差,直接应用到x/y坐标(三角函数...

    h5 + js 仿微信摇一摇

    3. **加速度计和陀螺仪**:理解这两个硬件传感器的工作原理是关键,它们可以提供设备在三维空间中的运动信息,包括角度变化、速度和加速度。 4. **事件绑定和解绑**:为了节省资源,通常会在需要时绑定摇一摇事件,...

    Opanorama.js--基于Threejs,同时支持手势和陀螺仪的360度全景JS库_JavaScript_HTML.zip

    5. **陀螺仪支持**: 当应用于移动设备时,Opanorama.js可以利用设备内置的陀螺仪传感器,根据设备的物理运动实时调整全景视角。这种功能极大地增强了用户的交互体验,尤其是在虚拟现实(VR)应用中。 6. **项目结构**...

    基于cocoscreator的指尖陀螺

    【基于cocoscreator的指尖陀螺】是一款使用CocosCreator开发的小型互动游戏,它以HTML5技术为基础,可在浏览器环境中运行。CocosCreator是一款强大的2D游戏开发工具,提供了直观的可视化编辑器和灵活的JavaScript...

    HTML 5 参考手册

    HTML5对移动设备有着良好的支持,许多移动浏览器原生支持HTML5特性,使得开发者可以构建跨平台的移动应用,如离线应用、地理定位、陀螺仪访问等。 三、HTML5与源码 在学习HTML5时,理解源码结构至关重要。源码通常...

    雨:情人节快乐。陀螺仪

    陀螺仪"是一个使用Phaser框架开发的HTML5游戏,可能包含雨天主题和陀螺仪控制,提供了一种独特的玩家体验。通过分析压缩包内的文件,我们可以了解游戏的结构和开发过程,从而学习和应用Phaser及其他相关技术。

    HTML5Plus应用开发指南

    在HTML5Plus应用中,开发者可以调用各种设备能力,如摄像头、陀螺仪、文件系统等,以及业务能力,如上传下载、二维码、地图、支付、语音输入和消息推送等。这些功能通过HTML5Plus规范的JavaScript对象plus来实现。...

    h5-图片拼接360全景

    本文将详细介绍如何使用HTML5、CSS和jQuery来创建一个360度全景图的效果。 首先,我们需要理解HTML5的基本结构和特性。HTML5是网页开发的标准,提供了丰富的标签和API,使得开发者可以更方便地构建交互式的网页。在...

    翻译翻译什么叫HTML5(六)配套代码

    还有`陀螺仪`和`加速度计`等硬件访问接口,让开发者能够利用手机的传感器实现更丰富的功能。 WK06文件可能是本系列教程的第六部分,可能涵盖了以上一些或全部HTML5特性,并提供了示例代码供学习者实践。通过这些...

    表白神器 只需下载 解压就可以使用

    这可能是一个HTML5页面,利用JavaScript来营造浪漫的交互效果,或者是用Python编写的一个小程序,用代码生成浪漫的图案或文字。 从压缩包的文件名称列表来看: 1. "index.html" - 这通常是网站或应用程序的主入口...

Global site tag (gtag.js) - Google Analytics