调用手机陀螺仪

最新推荐文章于 2024-03-04 17:43:40 发布

原创最新推荐文章于 2024-03-04 17:43:40 发布 · 5.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#手机 #移动 #陀螺仪

移动端开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用H5中的DeviceOrientationHandler方法实现设备方向感应功能，如微信摇一摇及通过晃动手机来控制小球移动等效果。文中详细展示了如何通过监听设备的方向变化并读取alpha、beta和gamma三个角度值来判断设备的当前状态。

H5有一个DeviceOrientationHandler方法

利用这个方法可以实现例如微信摇一摇、晃动手机控制小球移动等效果

代码如下：

<script>
        function DeviceOrientationHandler(event){
            var alpha = event.alpha,
                beta = event.beta,
                gamma = event.gamma;
            if(alpha != null || beta != null || gamma != null){
                dataContainerOrientation.innerHTML = "alpha:" + alpha + "<br />beta:" + beta + "<br />gamma:" + gamma;
                //判断屏幕方向
                var html = "";
                if( Math.abs(gamma) < GAMMA_MIN && Math.abs(beta) > BETA_MAX ){
                    html = "屏幕方向：Portrait";
                }

                if( Math.abs(beta) < BETA_MIN && Math.abs(gamma) > GAMMA_MAX ){
                    html = "屏幕方向：Landscape";
                }

                var gamma_html = "";
                if( gamma > 0 ){
                    gamma_html = "向右倾斜";
                }else{
                    gamma_html = "向左倾斜";
                }
                html += "<br />"+gamma_html
                stage.innerHTML = html;
            }else{
                dataContainerOrientation.innerHTML = "当前浏览器不支持DeviceOrientation";
            }
        }

        //为浏览器绑定deviceorientation事件和处理程序。
        if(window.DeviceOrientationEvent){
            window.addEventListener('deviceorientation',DeviceOrientationHandler,false);
        }else{
            alert("您的浏览器不支持DeviceOrientation");
        }
    </script>