使用陀螺仪模拟IOS系统的水平仪
前言
好久都没有正式的敲过代码了，今天决定使用 HTML5 中的陀螺仪模拟一下 IOS 系统的水平仪，而 Canvas 画布也有很长一段时间没有使用，顺带的复习一下 Canvas 画布的 API 。
文章目录
- 前言
- 效果
- 创建画布
- 获取陀螺仪参数
- 绘制倾斜的角度
- 清除画布
- 渲染页面
- 绘制圆形
- 水平后的效果
- 总结
效果
苹果系统的水平仪效果如下，不过在由于 IOS 系统将陀螺仪列入了用户隐私，所以 IOS 系统需要在 HTTP 协议中打开是无法获取到陀螺仪的参数信息，如需测试，请使用安卓测试。
创建画布
首先创建一个背景为黑色的画布，至于宽度和高度需要通过 document 获取
<canvas id="myCanvas" style="background-color: black;"></canvas>// 获取文档的宽高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)})
| 参数 | 描述 |
|---|---|
| alpha | 指南针（0~360°）为 0 的时候指向北 |
| beta | 手机短边倾斜的角度（-90°~90°） |
| gamma | 手机长边倾斜的角度（-90°~90°） |
绘制倾斜的角度
我们先来绘制一下中间的文本，因为有两个方向，所以我们需要判断 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); // 渲染倾斜角度})
看看效果，当我左右摇晃手机时数值会不断变化
绘制圆形
圆形的位置会随着 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); // 绘制圆形})
看效果
水平后的效果
if (Beta == 0 && Gamma == 0) {c.style = 'background-color: #65C466;'} else {c.style = 'background-color: black;'}
总结
陀螺仪的功能就已近完成了，已经将其放在我的个人服务器上，请在安卓手机上查看，由于很久都没有写项目，很多API都已经生疏，在做这个案例的时候需要去翻阅以前的博客笔记，效率非常慢，需要以后多加练习，弥补自己的不足。
柔情只为你懂
╰+哭是因爲堅強的太久メ
向右看齐
不念不忘少年蓝@
灰太狼
红太狼
た 入场券
分手后的思念是犯贱
还没有评论，来说两句吧...