JavascriptHTML5陀螺仪重力感应API

0

HTML5陀螺仪重力感应API

阅读:881 时间:2019年05月15日

陀螺仪是什么,它是测量物理量的偏转、倾斜时的转动角速度。赛车、跑酷游戏里最常见的转动手机控制方向。知识点学习:陀螺仪API很简单,只要监听deviceorientation :window.addEventListener('deviceorienta...

陀螺仪是什么,它是测量物理量的偏转、倾斜时的转动角速度。赛车、跑酷游戏里最常见的转动手机控制方向。


知识点学习:

陀螺仪API很简单,只要监听deviceorientation :

window.addEventListener('deviceorientation', function(event) { 
	let alpha = event.alpha; 
	let beta = event.beta; 
	let gamma = event.gamma; 
}, false);


具体解释下三个量:

aplha

装置水平放置时,绕 Z 轴旋转的角度,数值为 0 度到 360 度。

image.png

beta

行动装置水平放置时,绕 X 轴旋转的角度,数值为 -180 度到 180 度。

image.png


gamma

行动装置水平放置时,绕 Z 轴旋转的角度,数值为 -90 度到 90 度。

image.png


实例,做个指南针:

<!DOCTYPE html>
<html>
<head>
	<title>compass</title>
	<style type="text/css">
	html,body{
		margin: 0;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#compass{ 
		width: 50vw;
		height: 50vw;
		transform-origin:center center; 
		border-radius: 50vw;
		overflow: hidden;
		border: 10px double #333;
	}
	.compass-inner{
		margin: auto;
		height: 100%;
		width: 10vw;
		position: relative;
	}
	.compass-inner::before{
		content: "";
		display: block;
		left: 0;
		top: 0;
		height: 0;
		width: 0;
		border: 25vw solid red;
		border-width: 0 5vw 25vw 5vw;
		border-color: transparent transparent red transparent;

	}
	.compass-inner::after{
		content: "";
		display: block;
		left: 0;
		bottom: 0;
		height: 0;
		width: 0;
		border: 25vw solid blue;
		border-width: 25vw 5vw 0 5vw;
		border-color: blue transparent transparent  transparent;

	}
	</style>
</head>
<body>
	<div id="compass">
		<div class="compass-inner"></div>
	</div>
	<script type="text/javascript">
var compass = document.getElementById('compass'); 

if(window.DeviceOrientationEvent) { 

	window.addEventListener('deviceorientation', function(event) {
		var alpha;
		if(event.webkitCompassHeading) { 
			//iOS
			alpha = event.webkitCompassHeading;

			compass.style.WebkitTransform = 'rotate(-' + alpha + 'deg)'; 

			show.innerHTML = alpha; 

		} else { 

			alpha = event.alpha; webkitAlpha = alpha; 

			if(!window.chrome) {

				webkitAlpha = alpha-270; 

			} 
		} 

		compass.style.Transform = 'rotate(' + alpha + 'deg)'; 

		compass.style.WebkitTransform = 'rotate('+ webkitAlpha + 'deg)'; 

		compass.style.MozTransform = 'rotate(-' + alpha + 'deg)'; 

	}, false); 

}else{ 

	document.querySelector('body').innerHTML = '浏览器不支持陀螺仪'; 

}		
	</script>
</body>
</html>

手机访问http://ccued.com/demo/compass/compass.html试试,或直接扫二维码

image.pngimage.png

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^