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进行旋转绘图，一定会出现锯齿问题（笔者和业内很多朋友

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

正常情况下，如果开发者按照网上的教程去旋转一幅图形，得到的结果与本示例所提供的图相比较，发现前者更加圆润平滑。

我们总结了一条非常傻瓜的经验给读者，尤其是没有图形学基础的读者：当使用Canvas进行旋转绘图出现锯齿时，尽量找比要显示的图更大的图，两者（源图

与显示图）比例为2的倍数（例如要显示的图是100×100，则源图最好为200×200或400×400等）；

同时，在找到源图后，计算一下要旋转的半径是否为整数，如果不是，请予补足（例如要显示的图是100×100，准备的源图为200×200，通过图片处理软件将图片的尺寸再增加1个像素，变为201×201）。

转载于:https://my.oschina.net/u/1266171/blog/898298

HTML5 电子罗盘开发相关推荐

《HTML5 canvas开发详解（第2版）》——1.9　HTML5 Canvas对象
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.9节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
HTML5游戏开发(四)：飞机大战之显示场景和元素
<HTML5游戏开发>系列文章的目的有:一.以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型:二.egret可以非常轻量:三.egret相比PIXI.js和sprite ...
《HTML5 Canvas开发详解》——1.7　2D上下文及其当前状态
本节书摘来自异步社区<HTML5 Canvas开发详解>一书中的第1章,第1.7节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区&quo ...
HTML5游戏开发pdf
下载地址:网盘下载迈耶编著的<HTML5游戏开发>共10章,通过10个具体的游戏示例详细介绍HTML5的用法.每章都先列出相关的技术特性并给出了应用的描述,然后讨论了实现这个应用的关键需 ...
《HTML5 canvas开发详解（第2版）》——1.3　本书使用的基础HTML页面
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.3节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
使用HTML5技术开发的超酷颜色选择器
日期:2012-10-23 来源:GBin1.com 在线演示本地下载可能大家见过很多使用jquery/js开发的颜色选择器,今天这里我们将使用HTML5技术来自己实现一个更棒的颜色选择器.希 ...
免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（四）HTML5中的FileSystem接口...
HTML 5除了提供用于获取文件信息的File对象外,还加入了FileSystem相关的应用接口. FileSystem对于不同的处理功能做了仔细的分类,如用于文件读取和处理的FileReader和F ...
html5 app开发重大消息-腾讯在技术端推进Html5生态发展
日前,腾讯正式发布腾讯浏览服务(Tencent Browser Service,以下简称TBS),宣布为合作伙伴提供整合腾讯底层技术.内容框架.广告体系以及大数据等多方面能力的升级浏览解决方案.腾讯公 ...
小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
2015年必火的五个Html5移动开发工具推荐
2015年必火的五个Html5移动开发工具推荐转载于:https://www.cnblogs.com/zhujiabin/p/4785359.html

HTML5 电子罗盘开发

HTML5 电子罗盘开发

HTML5 电子罗盘开发相关推荐

最新文章

热门文章