详解html5如何获取手机陀螺仪角度信息的示例代码

来源：动视网责编：小采时间：2020-11-27 15:11:17

详解html5如何获取手机陀螺仪角度信息的示例代码

详解html5如何获取手机陀螺仪角度信息的示例代码:html5事件中，deviceorientation事件，此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。默认将手机垂直，且正面（90度）冲着自己alpha：左右旋转beta：前后旋转gamma：扭转（自转）<html> <hea

推荐度：

点击下载本文 文档为doc格式

导读详解html5如何获取手机陀螺仪角度信息的示例代码:html5事件中，deviceorientation事件，此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。默认将手机垂直，且正面（90度）冲着自己alpha：左右旋转beta：前后旋转gamma：扭转（自转）<html> <hea

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>
 <p id="arrow"></p>
</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>

详解html5如何获取手机陀螺仪角度信息的示例代码

推荐度：

点击下载本文 文档为doc格式

标签：手机 html5 陀螺仪

热门焦点

详解html5如何获取手机陀螺仪角度信息的示例代码

详解html5如何获取手机陀螺仪角度信息的示例代码

详解html5如何获取手机陀螺仪角度信息的示例代码

最新推荐

猜你喜欢

热门推荐