html5陀螺仪 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
            1.deviceorientation 设备的物理方向信息,表示为一系列本地坐标的旋角
            2.devicemotion 设备加速信息
            3.compassneedscalibration 通知web站点使用罗盘信息校准上述事件 
        */
        //获取旋转角度
        window.addEventListener("deviceorientation",function(event){
            /**
                alpha 以z为轴取值在(0,360)
                beta 以x为轴取值为(-180,180)
                gamma 以y为轴取值为(-90,90)
            */
            console.log(event.alpha,event.beta,event.gamma)
        },true);
        //获取罗盘校准
        window.addEventListener("compassneedscalibration",function(event){
            alert("请校准你的罗盘！");
            event.preventDefault();
        },true)
        //获取重力加速度
        window.addEventListener("devicemotion",function(event){
            //处理event.acceleration
            //x y z 方向移动加速度值
            //event.accelerationIncludingGravity
            //考虑重力加速度后设备在x y z 的值
            //event.rotationRate
            //alpha beta gamma 设备绕x y z 旋转的角度
            //摇一摇示例
            /**
                var speed = 30;
                var x = y =z = lastX = lastY = lastZ = 0;
                function deviceMotionHandler(eventData){
                    var acceleration = eventData.accelerationIncludingGravity;
                    x = acceleration.x;
                    y = acceleration.y;
                    z = acceleration.z;
                    if(Math.abs(x-lastX) > speed || Masth.abs(y-lastY) > speed ||Masth.abs(z-lastZ) > speed ){
                        //触发摇一摇
                        alert(1);
                    }
                }
            */
        },true);

    </script>
</body>
</html>

 

posted @ 2020-07-15 23:28  y-y-y-y  阅读(483)  评论(0)    收藏  举报