欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于js陀螺儀的理解分析

 更新時(shí)間:2019年04月11日 10:05:53   作者:前端小然子  
這篇文章主要給大家介紹了關(guān)于js陀螺儀的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

檢測(cè)設(shè)備方向

監(jiān)聽 deviceorientation

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

event中包含以下幾個(gè)值

屬性 描述
type 事件的類型。
bubbles 事件是否正常起泡
cancelable 該活動(dòng)是否可以取消?
alpha 設(shè)備繞Z軸的當(dāng)前方向; 也就是說,設(shè)備圍繞垂直于設(shè)備的線旋轉(zhuǎn)多遠(yuǎn)。
beta 設(shè)備圍繞X軸的當(dāng)前方向; 也就是說,設(shè)備向前或向后傾斜多遠(yuǎn)。
gamma 設(shè)備繞Y軸的當(dāng)前方向; 也就是說,設(shè)備向左或向右轉(zhuǎn)動(dòng)多遠(yuǎn)。
absolute 如果方向是作為設(shè)備坐標(biāo)系和地球坐標(biāo)系之間的差異提供的,則該值是該值; 如果設(shè)備無法檢測(cè)到地球坐標(biāo)系,則此值為false。

需要重點(diǎn)關(guān)注這四個(gè)返回值

  • alpha
  • beta
  • gamma
  • absolute

手機(jī)軸線如圖:

一、理解alpha

alpha 是設(shè)備繞Z軸的方向

它的取值范圍在0到360度之間。當(dāng)設(shè)備頂端指向正北方向時(shí),該屬性的取值為0。

即:圍繞垂直手機(jī)屏幕的軸轉(zhuǎn)動(dòng)

如圖:

二、理解beta

beta 是設(shè)備繞X軸的方向

它的取值范圍在-180到180度之間。當(dāng)設(shè)備與地球表面保持平行時(shí),該屬性的取值為0。

即:圍繞平行音量鍵的軸轉(zhuǎn)動(dòng)

如圖:

三、理解gamma

gamma 是設(shè)備繞Y軸的方向

它的取值范圍在-90到90度之間。當(dāng)該設(shè)備與地球表面保持平行時(shí),該屬性的取值為0。

即:圍繞平行充電口的軸轉(zhuǎn)動(dòng)

如圖:

四、理解absolute

absolute 是用來判斷是否是地球坐標(biāo)系。

如果當(dāng)前設(shè)備坐標(biāo)系與地球坐標(biāo)系相對(duì)應(yīng),則返回true,

否則返回false;

返回值為true時(shí)候,可以進(jìn)行使用其他坐標(biāo)系作為基準(zhǔn)

總結(jié)

  alpha => 圍繞垂直手機(jī)屏幕的軸轉(zhuǎn)動(dòng)
  beta  => 圍繞平行音量鍵的軸轉(zhuǎn)動(dòng)
  gamma => 圍繞平行充電口的軸轉(zhuǎn)動(dòng)

  absolute => 返回是否與地球坐標(biāo)系相對(duì)應(yīng)

示例代碼:

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

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

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

對(duì)于瀏覽器兼容性方面 可以在使用時(shí)候參照MDN的說明

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論