Detailed sample code explaining how to obtain the angle information of the mobile phone's gyroscope in HTML5-H5 Tutorial-php.cn

Detailed sample code explaining how to obtain the angle information of the mobile phone's gyroscope in HTML5

黄舟

Release： 2017-03-20 15:18:55

Original

3905 people have browsed it

html5 Event , deviceorientation event, this event is an event when detecting changes in device orientation. Its commonly used attributes are alpha(x), beta(y), and gamma(z).

By default, the phone is vertical and the front (90 degrees) is facing you

alpha: rotate left and right

beta: rotate forward and backward

gamma: twist (rotation)

<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>

Copy after login

The above is the detailed content of Detailed sample code explaining how to obtain the angle information of the mobile phone's gyroscope in HTML5. For more information, please follow other related articles on the PHP Chinese website!