HTML5 电子罗盘开发

最新推荐文章于 2024-06-08 17:00:59 发布

weixin_33719619

最新推荐文章于 2024-06-08 17:00:59 发布

阅读量710

点赞数

文章标签： javascript 移动开发 python ViewUI

原文链接：https://my.oschina.net/u/1266171/blog/898298

版权

2019独角兽企业重金招聘Python工程师标准>>>

HTML5 电子罗盘开发

2013-12-18 20:25| 发布者: admin| 查看: 5417| 评论: 0

摘要: 在讲解电子罗盘的时候，我们需要搞清楚两个概念：一个是地理北极，另一个是地磁北极。1. 了解地理北极和地磁北极地理北极是我们传统的纸质地图上的观念，即上北下南，左西右东。如果我们把地图上的南北极连成一条线 ...

在讲解电子罗盘的时候，我们需要搞清楚两个概念：一个是地理北极，另一个是地磁北极。

1. 了解地理北极和地磁北极

地理北极是我们传统的纸质地图上的观念，即上北下南，左西右东。如果我们把地图上的南北极连成一条线，就是地球自转的轴线。

地磁的南北极是地球磁场最强的两个地方，而地磁的南极在地理北极附近，地磁的北极在地理南极附近。我们把地理的南北极连线与地磁的南北极连线之间的夹角叫作磁偏角，

如下图所示：

请注意地磁南北极是会变的，因此，每过一段时间，或者每换了一个城市，都需要通过校正软件（或接口）来校正电子罗盘与地磁相匹配，以防止指向不准确。

如果之前用过智能手机上的指南针，那么我们都知道有一个校正过程，而HTML5标准也为我们提供了一个Web校正的接口，代码如下：

window.addEventListener("compassneedscalibration", function(event){
alert('你的指南针需要校正！举着你的设备，面对着天空划横8字型。正反各三次。');
event.preventDefault();
}, true);

2. HTML5电子罗盘开发示例

本例中，我们依然通过DeviceOrientation的相关事件进行开发，代码如代码清单所示:

<!DOCTYPE html>
<html lang=zh-cn manifest=index.manifest>
<!-- 离线缓存图片文件，以便下次使用相关图片时，可以迅速载入 -->
<head>
<title>指南针</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
height=device-height,initial-scale=1.0, minimum-scale=1.0,
maximum-scale=1.0,user-scalable=no, target-densityDpi=device-dpi">
<link href="opera.css" rel="stylesheet" type="text/css">
<style>
body{background-color:#404041;}
</style>
<script type="text/javascript" charset="utf-8" src="foropera.js"></script>
</head>
<body style="margin-left:0px">
<div id="helpme" style="opacity: 0.9;position:absolute;z-index:1000;top:100px;left:
20px;display:none;background-color:#333;-webkit-border-radius:15px;right:20px;">
<center style="margin-left:10px;margin-right:10px;border-bottom:1px #777
solid;"><spanstyle="color:#fff;height:30px;line-height:60px;font-size:26px;
margin-top:25px;margin-bottom:35px;">指南针</span></center>
<div
style="color:#ccc;font-size:18px;margin-left:20px;margin-right:20px;margin-top:
16p x;">通过Device API,HTML5应用在欧朋浏览器HTML5体验版调取了方向传感器。基于传感器的数据
能帮你确定方向。此demo利用此项功能制作出网页指南针。</div>
<br>
<center><button onclick="hiddeDiv('helpme')" style="opacity:1;
background-color:#777;border:0px;height:35px;line-height:25px;color:#eee;
width:140px;font-size:18px;-webkit-border-radius:5px;">关闭提示
</button></center>
<br>
</div>
<div id="help"
style="z-index:1000;position:absolute;left:0px;top:30px;"><imgsrc="help.png"
onclick="showhelp()" alt="help" /></div>
<canvas id="compass" style="margin-left:0px;margin-top:10px" width=480
height=480></canvas>
<script type="text/javascript">
function hiddeDiv(id){
document.getElementById('helpme').style.display='none';
}
function showhelp(){
document.getElementById('helpme').style.display='';
}
var canvas = document.getElementById("compass");
var ctx=canvas.getContext('2d');
window.addEventListener('deviceorientation', update, false);
var imageObj_arrow=new Image(); //实例化一个图片对象
imageObj_arrow.src="opera.png"; //将图片对象的路径设定好
var heading = 0; //初始化朝向
var current_heading = 0; //初始化当前朝向
var max_speed = 10; //初始化最大速度
window.scrollTo(0,1); //隐藏浏览器地址栏
function update(evt){ //更新函数
heading = evt.alpha+15;
}
function paint(){ //图形绘制函数
ww = canvas.width;
wh = canvas.height;
ctx.fillStyle="#404041";
ctx.fillRect(0,0,ww,wh);
ctx.save();
ctx.translate(ww/2,ww/2); //设定旋转中心
ctx.rotate(Math.PI*current_heading/180); //根据当前朝向角度旋转
ctx.drawImage(imageObj_arrow,-ww/2,-wh/2, ww, wh); //绘制指南针与针盘
ctx.restore();
deg1 = heading - current_heading; //得到偏转朝向
deg2 = 360 - Math.abs(deg1); //取得差值
step = 0;
if(Math.abs(deg1) <Math.abs(deg2)){ //判断两个角度是否一致
step = Math.min(Math.abs(deg1)/15, max_speed);
step = deg1 > 0? step: -step
}
else{
step = Math.min(deg2/15, max_speed);
step = deg1 > 0? -step: step;
}
current_heading += step; //动态调整朝向
setTimeout("paint();", 33);
}
paint(); //绘出表示针盘和指南针的函数
</script>
</body>
</html>

当转动设备时，指针会自动校正，动态旋转，始终指向北方。

本代码的执行效果如下图所示。

3. 本例小结

在传统智能手机的原生程序开发中，指南针工具是最常见的应用之一，但基于Web进行开发在目前（截至2012年1月）还是非常罕见的。首先就是标准的支持问题，众多的浏览器尚未全面支持HTML5的Device API部分，所以几乎很少在网页上看到类似的作品。

本例展示了欧朋浏览器对HTML5的Device API的支持。

当用Canvas进行绘图操作时，抗锯齿操作并不是我们遇到的最大问题，那么最大问题是什么呢？是作品将在哪个浏览器运行的问题。如果你的作品运行在iOS系统的Safari浏览器上，那么Safari的硬件图形渲染技术将帮助你解决锯齿问题，开发者根本不需要考虑相关的锯齿问题，这是苹果公司一惯地在细节上替开发者和用户考虑比较周到的地方。但是，如果是非iOS系统，比如Android系统，那么若使用Canvas进行旋转绘图，一定会出现锯齿问题（笔者和业内很多朋友

都在这个事情上吃过亏），如下图所示。