概念

地球坐標(biāo)系

地球坐標(biāo)系是相對于地心的，也就是說，它的軸是基于重力方向和磁場北方向。我們使用大寫的X,Y,Z來描述地球坐標(biāo)系的軸。

X軸沿著地平面，垂直于Y軸，向東為正，向西為負(fù)。

Y軸沿著地平面，向北(北極，不是磁場北)為正，向南為負(fù)。

Z軸垂直于地平面，想象成一條線連接著設(shè)備跟地心。背對地心的方向為正，指向地心的方向為負(fù)。

設(shè)備坐標(biāo)系

設(shè)備坐標(biāo)系是相對于設(shè)備中心的。我們使用小寫的x,y,z來描述它的軸。

x軸沿著屏幕表面，向右為正，向左為負(fù)。

y軸沿著屏幕表面，向上為正，向下為負(fù)。

z軸垂直屏幕表面或鍵盤，遠(yuǎn)離屏幕的方向為正。

Alpha

圍繞z軸旋轉(zhuǎn)設(shè)備將使alpha角度值發(fā)生變化:

alpha為0°時表示設(shè)備的頂部正指北極方向，當(dāng)設(shè)備向左旋轉(zhuǎn)時，alpha將增加。

Beta

圍繞x軸旋轉(zhuǎn)，也就是前后旋轉(zhuǎn)，將使beta值發(fā)生改變:

當(dāng)beta為0° 時表示設(shè)備頂部和底部與地表面的距離是一樣的，當(dāng)設(shè)備向前翻轉(zhuǎn)時，beta遞增到180°，向后翻轉(zhuǎn)遞減到-180°。

Gamma

當(dāng)圍繞y軸旋轉(zhuǎn)，也就是左右傾斜設(shè)備時，將使gamma值發(fā)生改變:

gamma等于0°表示設(shè)備左右兩邊與地表面的距離相等，當(dāng)設(shè)備向右翻轉(zhuǎn)時，gamma遞增到90°，向左翻轉(zhuǎn)時，遞減到-90°。

指南針實現(xiàn)

要接收設(shè)備方向變化信息，你只需要注冊監(jiān)聽deviceorientation事件：

window.addEventListener("deviceorientation", handleOrientation, true);

注冊完事件監(jiān)聽處理函數(shù)后(對應(yīng)這個例子中的handleOrientation)，監(jiān)聽函數(shù)會定期地接收到最新的設(shè)備方向數(shù)據(jù)。

方向事件對象中包含四個值：

DeviceOrientationEvent.absolute(返回的是個bool值表示設(shè)備是否絕對支持方向定位)

DeviceOrientationEvent.alpha(0°為指北方向)

DeviceOrientationEvent.beta

DeviceOrientationEvent.gamma

if (window.DeviceOrientationEvent) {

var timer = null, nowTime = +new Date();

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

var alpha = null;

if (event.webkitCompassHeading) {

alpha = event.webkitCompassHeading;

} else {

alpha = event.alpha;

}

var selfDegress = 360 - alpha;

if (+new Date() - nowTime > 1000) {

nowTime = +new Date();

var userPointer = document.getElementById("userPointer");

if (userPointer) {

userPointer.style.transform = "translateX(-50%) rotate(" + selfDegress + "deg)";

userPointer.style.transformOrigin = "50% 100%";

}

}

}, false)

}

總結(jié)

以上是生活随笔為你收集整理的html5 指南针,html5指南针实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。