どのように水平線とデバイスの間の角度を取得するjavascript？

Question

私はウェブページに1杯の水を見せたいと思います。ユーザーが自分のデバイスを回転させたら、水は自然のように水平線まで下がります。

window.addEventListener('deviceorientation', this.handleOrientation.bind(this)); 

handleOrientation(orientData) { 
    var absolute = orientData.absolute; 
    var alpha = orientData.alpha; 
    var beta = orientData.beta; 
    var gamma = orientData.gamma; 
} 

上記の4つの角度情報を得ることができます。しかし、デバイスから水平線までの現在の角度を取得する方法がわからないので、水を水平線に回転させることができます。

Answer 1

MDNのthe exampleと、trigonometryのビットに基づいて、以下のコードを思いついた。 Android上のChromeでこれを正常にテストしましたが、Firefoxは悲しいことに悲しいことに、deviceorientationイベントを起動しませんでした（MDNの例でも機能しませんでした）。

他の警告は、画面の向きです（デバイスが現在横向きモードの場合）。古いAPI（window.orientation）は一部のブラウザではサポートされていません。新しいAPI（screen.orientation）は完全に実装されておらず、動作も異なります。

var watercup = document.querySelector('#watercup'); 
 

 
function handleOrientation(event) { 
 
    var x = event.beta; // In degree in the range [-180,180], x, 'front to back' 
 
    var y = event.gamma; // In degree in the range [-90,90], y, 'left to right' 
 
    var z = event.alpha; // 0-360, z, compass orientation 
 

 
    // coord 1: 0,0 
 
    // coord 2: x,y 
 
    // calculate the angle 
 
    var rad = Math.atan2(y, x); 
 
    var deg = rad * (180/Math.PI); 
 

 
    // take into account if phone is held sideways/in landscape mode 
 
    var screenOrientation = screen.orientation || screen.mozOrientation || screen.msOrientation; 
 
    // 90, -90, or 0 
 
    var angle = screenOrientation.angle || window.orientation || 0; 
 
    
 
    deg = deg + angle; 
 

 
    watercup.innerHTML = Math.round(deg); 
 
    watercup.style.transform = 'rotate('+ -deg +'deg)'; 
 
} 
 

 
window.addEventListener('deviceorientation', handleOrientation);

#watercup { 
 
    border:2px solid #aaa; 
 
    width:100px; 
 
    height:200px; 
 
    background: linear-gradient(to bottom, white 20%, lightblue 20%, blue); 
 
    margin: 20px auto; 
 
}

<div id="watercup"></div>