html5 指南针,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;