HTML5指南針

deviceOrientation & deviceMotion

以上為HTML5的提供的兩種接口

• 搖一搖功能（DeviceMotion）
• 重力感應方向控制/指南針（DeviceOrientation）

重力感應與羅盤 DeviceOrientation

當瀏覽器的Orientation發生變化時，觸發DeviceOrientation事件，並返回一個DeviceOrientationEvent對象，屬性如下：

• alpha：設備的指示方向，根據指南針的設定情況而定
• beta：設備圍繞X軸旋轉的角度
• gama：設備圍繞Y軸旋轉的角度

工作原理

根據event對象的三個方向的參數來確定設備的旋轉角度：

• alpha的取值范圍是0-360，一般來說，設備指向正北方向時為0。
• beta值為設備繞x軸旋轉的角度，取值范圍為-180-180。
• gamma取值范圍-90-90.

當屏幕從水平沿y軸向左傾斜時gamma值變為負值，向右傾斜變為正值。

檔屏幕從水平沿x軸向前傾斜時beta值變為正值，向后傾斜時變為負值。

實現指南針demo

首先為瀏覽器綁定deviceorientation事件和處理程序

//add deviceorientation event listener
if(window.DeviceOrientationEvent){//返回一個DeviceOrientationEvent對象
	window.addEventListener('deviceorientation',DeviceOrientationHandler,false);///添加監聽事件
}else{
	alert("您的瀏覽器不支持DeviceOrientation");
}

function DeviceOrientationHandler(event) {
    alpha = event.alpha; //Z軸方向
    var beta = event.beta,//X軸方向
        gamma = event.gamma;//Y軸方向

    if (alpha != null) {
        arrow.style.webkitTransform = "rotate(" + alpha + "deg)";//箭頭旋轉
    }
}