js陀螺儀的示例分析

這篇文章主要為大家展示了“js陀螺儀的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“js陀螺儀的示例分析”這篇文章吧。

檢測設備方向

監聽 deviceorientation

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

event中包含以下幾個值

需要重點關注這四個返回值

• alpha

• beta

• gamma

• absolute

手機軸線如圖：

一、理解alpha

alpha 是設備繞Z軸的方向

它的取值范圍在0到360度之間。當設備頂端指向正北方向時，該屬性的取值為0。

即：圍繞垂直手機屏幕的軸轉動

如圖：

二、理解beta

beta 是設備繞X軸的方向

它的取值范圍在-180到180度之間。當設備與地球表面保持平行時，該屬性的取值為0。

即：圍繞平行音量鍵的軸轉動

如圖：

三、理解gamma

gamma 是設備繞Y軸的方向

它的取值范圍在-90到90度之間。當該設備與地球表面保持平行時，該屬性的取值為0。

即：圍繞平行充電口的軸轉動

如圖：

四、理解absolute

absolute 是用來判斷是否是地球坐標系。

如果當前設備坐標系與地球坐標系相對應，則返回true，

否則返回false；

返回值為true時候，可以進行使用其他坐標系作為基準

總結

  alpha => 圍繞垂直手機屏幕的軸轉動
  beta  => 圍繞平行音量鍵的軸轉動
  gamma => 圍繞平行充電口的軸轉動

  absolute => 返回是否與地球坐標系相對應

示例代碼：

if (window.DeviceOrientationEvent) {
 window.addEventListener("deviceorientation", function(event) {
  // alpha: 圍繞垂直手機屏幕的軸轉動的旋轉角度
  var rotateDegrees = event.alpha;
  // gamma: 圍繞平行充電口的軸轉動的旋轉角度
  var leftToRight = event.gamma;
  // beta: 圍繞平行音量鍵的軸轉動的旋轉角度
  var frontToBack = event.beta;

  handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
 }, true);
}

var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
 // 彈奏一曲夏威夷吉他
};

對于瀏覽器兼容性方面 可以在使用時候參照MDN的說明

以上是“js陀螺儀的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！