步骤一 思路 根据 deviceorientation alpha 属性, 找出角度 根据不同角度,旋转表盘.
绘制表盘.用canvas? canvas 旋转.全部都重新画一遍.可以. 表盘样式, 一个圆圈, 有八个 刻度 以及 八个文字. 圆圈可以画, 我计算出角度, 按照 2 Math.PI / 8 也可以画出刻度.
问题, 能不能根据圆心坐标和角度,和半径 计算出坐标位置?
理论上可以. r * sin r * cos 即可. 那我们直接求 坐标. 半径相同,的位置, 我们画 刻度 半径稍微大的位置, 我们 写文字. 文字需要旋转. 文字需要旋转的角度是,与 传入的角度相同. 然后需要一个 指向屏幕上方的,固定指针.
问题,alpha 什么值时指北部? 我们假设 0 时,他是指向北方的.
步骤 2 画出静态图 ``` // 先画图. var myCanvas = document.getElementById(“myCanvas”); var ctx = myCanvas.getContext(“2d”);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
ctx.beginPath();
// 先画一个圈.
// 半径
var r = 80;
ctx.arc(250,250,r,0,2 * Math.PI,0);
ctx.strokeStyle = "firebrick";
ctx.lineWidth = 10;
ctx.stroke();
// 计算八个坐标.
// 先生成八个 角度.
var center = {
x : 250,
y : 250
}
var arr = getZuobiao(center,r);
// 根据坐标, 我们画出几个圆圈 当做刻度
arr.forEach((item) => {
ctx.beginPath();
ctx.arc(item.x,item.y,8,0,2 * Math.PI,0);
ctx.fillStyle = "#333333";
ctx.fill();
});
//
var textArr = getZuobiao(center,r + 40);
// 根据坐标, 我们画出 字.
textArr.forEach((item,index) => {
// 我们需要判断 哪个是哪个, 所以我们先把关键字,弄成一个数组.
var str = ["东南","正南","西南","正西","西北","正北","东北","正东"];
ctx.beginPath();
// 文字居中
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "20px Arial";
ctx.fillText(str[index],item.x,item.y);
})
// 中间画一条直线
ctx.beginPath();
ctx.moveTo(center.x,center.y);
ctx.lineTo(center.x,center.y - r + 30);
ctx.strokeStyle = "#333333";
ctx.lineCap = "round";
ctx.lineWidth = 8;
ctx.stroke();
// 封装成函数, 因为我们还要起第二组 坐标
function getZuobiao (center,r) {
var step = Math.PI / 4;
var arr = [];
var reg = 0;
// 临时角度
var reg1 = reg;
for(var i = 0; i < 8;i++) {
var item = arr[i] = {};
reg1 += step;
item.x = center.x + r * Math.cos(reg1);
item.y = center.y + r * Math.sin(reg1);
// 改变角度
}
return arr;
}
// 静态图已经画出来. ``` > 步骤3 动起来. ``` <!DOCTYPE html>
```
问题 每次我重新进来的时候, 都指向正北? 什么鬼? 每次重新进来的时候, alpha值都是0 左右. 安卓苹果皆如此, 问题出在哪里? 很奇怪,我怀疑, alpha 值是否能指北, alpha值本身跟地球方向无关吧? 只是旋转角度吧? 先这样吧 回头再想.
