前言
好久都没有正式的敲过代码了,今天决定使用 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都已经生疏,在做这个案例的时候需要去翻阅以前的博客笔记,效率非常慢,需要以后多加练习,弥补自己的不足。