今天小編給大家分享一下HTML5怎么開發(fā)電子羅盤的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
成都創(chuàng)新互聯(lián)長期為上千余家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為宣恩企業(yè)提供專業(yè)的成都網站設計、做網站、成都外貿網站建設公司，宣恩網站改版等技術服務。擁有十多年豐富建站經驗和眾多成功案例,為您定制開發(fā)。
在講解電子羅盤的時候，我們需要搞清楚兩個概念：一個是地理北極，另一個是地磁北極。
1. 了解地理北極和地磁北極
地理北極是我們傳統(tǒng)的紙質地圖上的觀念，即上北下南，左西右東。如果我們把地圖上的南北極連成一條線，就是地球自轉的軸線。
地磁的南北極是地球磁場最強的兩個地方，而地磁的南極在地理北極附近，地磁的北極在地理南極附近。我們把地理的南北極連線與地磁的南北極連線之間的夾角叫作磁偏角，
請注意地磁南北極是會變的，因此，每過一段時間，或者每換了一個城市，都需要通過校正軟件（或接口）來校正電子羅盤與地磁相匹配，以防止指向不準確。
如果之前用過智能手機上的指南針，那么我們都知道有一個校正過程，而HTML5標準也為我們提供了一個Web校正的接口，代碼如下：
window.addEventListener("compassneedscalibration", function(event){
alert('你的指南針需要校正！舉著你的設備，面對著天空劃橫8字型。正反各三次。');
event.preventDefault();
}, true);
2. HTML5電子羅盤開發(fā)示例
本例中，我們依然通過DeviceOrientation的相關事件進行開發(fā)，代碼如代碼清單所示:
style="z-index:1000;position:absolute;left:0px;top:30px;"> onclick="showhelp()" alt="help" />
當轉動設備時，指針會自動校正，動態(tài)旋轉，始終指向北方。
3. 本例小結
在傳統(tǒng)智能手機的原生程序開發(fā)中，指南針工具是最常見的應用之一，但基于Web進行開發(fā)在目前（截至2012年1月）還是非常罕見的。首先就是標準的支持問題，眾多的瀏覽器尚未全面支持HTML5的Device API部分，所以幾乎很少在網頁上看到類似的作品。
本例展示了歐朋瀏覽器對HTML5的Device API的支持。
當用Canvas進行繪圖操作時，抗鋸齒操作并不是我們遇到的最大問題，那么最大問題是什么呢？是作品將在哪個瀏覽器運行的問題。如果你的作品運行在iOS系統(tǒng)的Safari瀏覽器上，那么Safari的硬件圖形渲染技術將幫助你解決鋸齒問題，開發(fā)者根本不需要考慮相關的鋸齒問題，這是蘋果公司一慣地在細節(jié)上替開發(fā)者和用戶考慮比較周到的地方。但是，如果是非iOS系統(tǒng)，比如Android系統(tǒng)，那么若使用Canvas進行旋轉繪圖，一定會出現鋸齒問題（筆者和業(yè)內很多朋友
都在這個事情上吃過虧）。
正常情況下，如果開發(fā)者按照網上的教程去旋轉一幅圖形，得到的結果與本示例所提供的圖相比較，發(fā)現前者更加圓潤平滑。
我們總結了一條非常傻瓜的經驗給讀者，尤其是沒有圖形學基礎的讀者：當使用Canvas進行旋轉繪圖出現鋸齒時，盡量找比要顯示的圖更大的圖，兩者比例為2的倍數（例如要顯示的圖是100×100，則源圖最好為200×200或400×400等）；
同時，在找到源圖后，計算一下要旋轉的半徑是否為整數，如果不是，請予補足（例如要顯示的圖是100×100，準備的源圖為200×200，通過圖片處理軟件將圖片的尺寸再增加1個像素，變?yōu)?01×201）。
以上就是“HTML5怎么開發(fā)電子羅盤”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
