溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML5怎么開發(fā)電子羅盤

發(fā)布時間：2022-03-08 10:33:24 來源：億速云 閱讀：257 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下HTML5怎么開發(fā)電子羅盤的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

在講解電子羅盤的時候，我們需要搞清楚兩個概念：一個是地理北極，另一個是地磁北極。

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

地理北極是我們傳統(tǒng)的紙質(zhì)地圖上的觀念，即上北下南，左西右東。如果我們把地圖上的南北極連成一條線，就是地球自轉(zhuǎn)的軸線。

地磁的南北極是地球磁場最強的兩個地方，而地磁的南極在地理北極附近，地磁的北極在地理南極附近。我們把地理的南北極連線與地磁的南北極連線之間的夾角叫作磁偏角，

請注意地磁南北極是會變的，因此，每過一段時間，或者每換了一個城市，都需要通過校正軟件（或接口）來校正電子羅盤與地磁相匹配，以防止指向不準確。

如果之前用過智能手機上的指南針，那么我們都知道有一個校正過程，而HTML5標準也為我們提供了一個Web校正的接口，代碼如下：

window.addEventListener("compassneedscalibration", function(event){

alert('你的指南針需要校正！舉著你的設(shè)備，面對著天空劃橫8字型。正反各三次。');

event.preventDefault();

}, true);

2. HTML5電子羅盤開發(fā)示例

本例中，我們依然通過DeviceOrientation的相關(guān)事件進行開發(fā)，代碼如代碼清單所示:

<!DOCTYPE html>

<html lang=zh-cn manifest=index.manifest>

<!-- 離線緩存圖片文件，以便下次使用相關(guān)圖片時，可以迅速載入 -->

<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應(yīng)用在歐朋瀏覽器HTML5體驗版調(diào)取了方向傳感器?；趥鞲衅鞯臄?shù)據(jù)

能幫你確定方向。此demo利用此項功能制作出網(wǎng)頁指南針。</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;">關(guān)閉提示

</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"; //將圖片對象的路徑設(shè)定好

var heading = 0; //初始化朝向

var current_heading = 0; //初始化當前朝向

var max_speed = 10; //初始化最大速度

window.scrollTo(0,1); //隱藏瀏覽器地址欄

function update(evt){ //更新函數(shù)

heading = evt.alpha+15;

}

function paint(){ //圖形繪制函數(shù)

ww = canvas.width;

wh = canvas.height;

ctx.fillStyle="#404041";

ctx.fillRect(0,0,ww,wh);

ctx.save();

ctx.translate(ww/2,ww/2); //設(shè)定旋轉(zhuǎn)中心

ctx.rotate(Math.PI*current_heading/180); //根據(jù)當前朝向角度旋轉(zhuǎn)

ctx.drawImage(imageObj_arrow,-ww/2,-wh/2, ww, wh); //繪制指南針與針盤

ctx.restore();

deg1 = heading - current_heading; //得到偏轉(zhuǎn)朝向

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; //動態(tài)調(diào)整朝向

setTimeout("paint();", 33);

}

paint(); //繪出表示針盤和指南針的函數(shù)

</script>

</body>

</html>

當轉(zhuǎn)動設(shè)備時，指針會自動校正，動態(tài)旋轉(zhuǎn)，始終指向北方。

3. 本例小結(jié)

在傳統(tǒng)智能手機的原生程序開發(fā)中，指南針工具是最常見的應(yīng)用之一，但基于Web進行開發(fā)在目前（截至2012年1月）還是非常罕見的。首先就是標準的支持問題，眾多的瀏覽器尚未全面支持HTML5的Device API部分，所以幾乎很少在網(wǎng)頁上看到類似的作品。

本例展示了歐朋瀏覽器對HTML5的Device API的支持。

當用Canvas進行繪圖操作時，抗鋸齒操作并不是我們遇到的最大問題，那么最大問題是什么呢？是作品將在哪個瀏覽器運行的問題。如果你的作品運行在iOS系統(tǒng)的Safari瀏覽器上，那么Safari的硬件圖形渲染技術(shù)將幫助你解決鋸齒問題，開發(fā)者根本不需要考慮相關(guān)的鋸齒問題，這是蘋果公司一慣地在細節(jié)上替開發(fā)者和用戶考慮比較周到的地方。但是，如果是非iOS系統(tǒng)，比如Android系統(tǒng)，那么若使用Canvas進行旋轉(zhuǎn)繪圖，一定會出現(xiàn)鋸齒問題（筆者和業(yè)內(nèi)很多朋友

都在這個事情上吃過虧）。

正常情況下，如果開發(fā)者按照網(wǎng)上的教程去旋轉(zhuǎn)一幅圖形，得到的結(jié)果與本示例所提供的圖相比較，發(fā)現(xiàn)前者更加圓潤平滑。

我們總結(jié)了一條非常傻瓜的經(jīng)驗給讀者，尤其是沒有圖形學基礎(chǔ)的讀者：當使用Canvas進行旋轉(zhuǎn)繪圖出現(xiàn)鋸齒時，盡量找比要顯示的圖更大的圖，兩者比例為2的倍數(shù)（例如要顯示的圖是100&times;100，則源圖最好為200&times;200或400&times;400等）；

同時，在找到源圖后，計算一下要旋轉(zhuǎn)的半徑是否為整數(shù)，如果不是，請予補足（例如要顯示的圖是100&times;100，準備的源圖為200&times;200，通過圖片處理軟件將圖片的尺寸再增加1個像素，變?yōu)?01&times;201）。

以上就是“HTML5怎么開發(fā)電子羅盤”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手