溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下HTML5怎么開發電子羅盤的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
在講解電子羅盤的時候，我們需要搞清楚兩個概念：一個是地理北極，另一個是地磁北極。
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）。
以上就是“HTML5怎么開發電子羅盤”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
