概念

地球坐標系

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

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

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

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

設備坐標系

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

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

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

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

Alpha

圍繞z軸旋轉設備將使alpha角度值發生變化:

alpha為0°時表示設備的頂部正指北極方向，當設備向左旋轉時，alpha將增加。

Beta

圍繞x軸旋轉，也就是前后旋轉，將使beta值發生改變:

當beta為0° 時表示設備頂部和底部與地表面的距離是一樣的，當設備向前翻轉時，beta遞增到180°，向后翻轉遞減到-180°。

Gamma

當圍繞y軸旋轉，也就是左右傾斜設備時，將使gamma值發生改變:

gamma等于0°表示設備左右兩邊與地表面的距離相等，當設備向右翻轉時，gamma遞增到90°，向左翻轉時，遞減到-90°。

指南針實現

要接收設備方向變化信息，你只需要注冊監聽deviceorientation事件：

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

注冊完事件監聽處理函數后(對應這個例子中的handleOrientation)，監聽函數會定期地接收到最新的設備方向數據。

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

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

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)

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。