14.html5 作业 简单移动端-指南针 用 canvas 画一下.

步骤一 思路
根据 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"); 
            
            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 动起来.

问题 每次我重新进来的时候, 都指向正北? 什么鬼?
每次重新进来的时候, alpha值都是0 左右.
安卓苹果皆如此, 问题出在哪里?
很奇怪,我怀疑, alpha 值是否能指北, alpha值本身跟地球方向无关吧?
只是旋转角度吧?
先这样吧 回头再想.