html5如何獲取手機陀螺儀角度資訊
阿新 • • 發佈:2019-01-04
html5事件中,deviceorientation事件,此事件是檢測裝置方向變化時的事件。其常用屬性為alpha(x)、beta(y)、gamma(z)。
預設將手機垂直,且正面(90度)衝著自己
alpha:左右旋轉
beta:前後旋轉
gamma:扭轉(自轉)
<html>
<head>
<title>DeviceOrientationEvent</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<script src="js/common/jquery.min.js"></script>
<script src="js/common/eventutil.js"></script>
</head>
<body>
<div id="arrow"></div>
</body>
</html>
<script>
try {
var text = "";
window.addEventListener("deviceorientation" , orientationHandler, false);
function orientationHandler(event) {
text = ""
var arrow = document.getElementById("arrow");
text += "左右旋轉:rotate alpha{" + Math.round(event.alpha) + "deg)<p>";
text += "前後旋轉:rotate beta{" + Math.round(event.beta) + "deg)<p>" ;
text += "扭轉裝置:rotate gamma{" + Math.round(event.gamma) + "deg)<p>";
arrow.innerHTML = text;
}
}
catch (e) {
$("#arrow").html(e.message)
}
</script>