前言

好久都没有正式的敲过代码了，今天决定使用 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)
})

绘制倾斜的角度

我们先来绘制一下中间的文本，因为有两个方向，所以我们需要判断 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都已经生疏，在做这个案例的时候需要去翻阅以前的博客笔记，效率非常慢，需要以后多加练习，弥补自己的不足。