Home  >  Article  >  Web Front-end  >  Detailed sample code explaining how to obtain the angle information of the mobile phone's gyroscope in HTML5

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

黄舟
黄舟Original
2017-03-20 15:18:553953browse

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn