使用陀螺仪模拟IOS系统的水平仪

向右看齐 2023-07-21 15:28 14阅读 0赞

# 前言 #

好久都没有正式的敲过代码了，今天决定使用 `HTML5` 中的陀螺仪模拟一下 `IOS` 系统的水平仪，而 `Canvas` 画布也有很长一段时间没有使用，顺带的复习一下 `Canvas` 画布的 `API` 。

### 文章目录 ###

*  前言
 *   *  效果
     *  创建画布
     *  获取陀螺仪参数
     *  绘制倾斜的角度
     *  清除画布
     *  渲染页面
     *  绘制圆形
     *  水平后的效果
 *  总结

## 效果 ##

苹果系统的水平仪效果如下，不过在由于 `IOS` 系统将陀螺仪列入了用户隐私，所以 `IOS` 系统需要在 `HTTP` 协议中打开是无法获取到陀螺仪的参数信息，如需测试，请使用安卓测试。  
![在这里插入图片描述][20200404095750688.gif_pic_center]

## 创建画布 ##

首先创建一个背景为黑色的画布，至于宽度和高度需要通过 `document` 获取

// 获取文档的宽高
    const documentWidth = document.documentElement.clientWidth;
    const documentHeight = document.documentElement.clientHeight;
    // 获取画布
    var c = document.getElementById("myCanvas");
    // 设置画布的宽高
    c.width = documentWidth;
    c.height = documentHeight;

## 获取陀螺仪参数 ##

监听 `deviceorientation` 事件获取陀螺仪参数，电脑上显示陀螺仪的参数是为 `null`

window.addEventListener("deviceorientation", function(event) { 
    	console.log(event)
    })

![在这里插入图片描述][20200404101608748.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>alpha</td> 
   <td>指南针（0~360°）为 0 的时候指向北</td> 
  </tr> 
  <tr> 
   <td>beta</td> 
   <td>手机短边倾斜的角度（-90°~90°）</td> 
  </tr> 
  <tr> 
   <td>gamma</td> 
   <td>手机长边倾斜的角度（-90°~90°）</td> 
  </tr> 
 </tbody> 
</table>

## 绘制倾斜的角度 ##

我们先来绘制一下中间的文本，因为有两个方向，所以我们需要判断 `beta` 和 `gamma` 的倾斜角度，展示大的倾斜角。

function ctxBeta(beta, gamma) { 
        var ctx = c.getContext("2d");
        ctx.fillStyle = 'white';
        ctx.font = "100px Arial";
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
        // 判断倾斜角度，展示倾斜角度大的数值
        ctx.fillText(Math.abs(gamma) > Math.abs(beta) ? gamma + '°' : beta + '°', documentWidth / 2, documentHeight / 2);
    }

## 清除画布 ##

绘制画布前需要清除画布，下一次渲染不会有上一次的画面。

function clearCanvas() { 
        var cxt = c.getContext("2d");
        cxt.clearRect(0, 0, c.width, c.height);
    }

## 渲染页面 ##

window.addEventListener("deviceorientation", function(event) { 
    	// 数据精度太长，四舍五入处理
        let Beta = Math.ceil(event.beta); 
        let Gamma = Math.ceil(event.gamma);
        clearCanvas(); // 清除画布
        ctxBeta(Beta, Gamma); // 渲染倾斜角度
    })

**看看效果，当我左右摇晃手机时数值会不断变化**

![在这里插入图片描述][20200404105541834.gif_pic_center]

## 绘制圆形 ##

圆形的位置会随着 `beta` 值和 `gamma` 值得变化而变化。

function ctxarcone(beta, gamma) { 
        var ctx = c.getContext("2d");
        ctx.globalCompositeOperation = "xor";
        ctx.beginPath();
        ctx.arc(documentWidth / 2 - gamma, documentHeight / 2 - beta, 200, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();
    }
    
    function ctxarctwo(beta, gamma) { 
        var ctx = c.getContext("2d");
        ctx.globalCompositeOperation = "xor";
        ctx.beginPath();
        ctx.arc(documentWidth / 2 + gamma, documentHeight / 2 + beta, 200, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();
    }

将绘制函数放在监听函数里渲染，为什么要将值乘 `10` 是因为 `beta` 值和 `gamma` 值本身偏小，按照倍数方法后圆形移动的距离更长，效果更好。

window.addEventListener("deviceorientation", function(event) { 
        let Beta = Math.ceil(event.beta);
        let Gamma = Math.ceil(event.gamma);
        clearCanvas(); // 清除画布
        ctxBeta(Beta, Gamma); // 绘制倾斜角度
        ctxarcone(Beta * 10, Gamma * 10); // 绘制圆形
        ctxarctwo(Beta * 10, Gamma * 10); // 绘制圆形
    })

**看效果**  
![在这里插入图片描述][20200404111334789.gif_pic_center]

## 水平后的效果 ##

if (Beta == 0 && Gamma == 0) { 
        c.style = 'background-color: #65C466;'
    } else { 
        c.style = 'background-color: black;'
    }

# 总结 #

陀螺仪的功能就已近完成了，已经将其放在我的个人服务器上，[请在安卓手机上查看][Link 1]，由于很久都没有写项目，很多API都已经生疏，在做这个案例的时候需要去翻阅以前的博客笔记，效率非常慢，需要以后多加练习，弥补自己的不足。

[20200404095750688.gif_pic_center]: /images/20230528/94a6a2a91b2f4525b2d81d62d0884d26.png
[20200404101608748.png_pic_center]: /images/20230528/d6a248bedc654a279daa71696c04d1c7.png
[20200404105541834.gif_pic_center]: /images/20230528/c1f5a798e5644612ab7784db8774f8b0.png
[20200404111334789.gif_pic_center]: /images/20230528/70872377f0914f9dad42b25a3858a7c4.png
[Link 1]: https://www.zongmeng.top/gyroscope/