DeviceOrientation---コンパスを実現
4497 ワード
一、背景
二、インタフェースの説明
三、実現方式
四、指北針の例DEMO
五、関連事件
sns ， 、 ， HTML5 DeviceOrientation ， 。
二、インタフェースの説明
HTML5 DeviceOrientation API 。 Orientation ， DeviceOrientation ， DeviceOrientationEvent ， ：
DeviceOrientationEvent: ， ， 、 、 。
：x ，y ，z 。（ ， 0）
alpha z 。 （ alpha OK ）
beta x
gamma y
webkitCompassHeading: 。 0 ， 90 ， 180 ， 270 。 0 ， ， 。
webkitCompassAccuracy： ， 。 10。
三、実現方式
//
if(window.DeviceOrientationEvent){
window.addEventListener('deviceorientation',DeviceOrientationHandler,false);
}else{
alert(" DeviceOrientation");
}
//
function DeviceOrientationHandler(event){
document.getElementById("alpha").innerHTML = event.alpha;
document.getElementById("beta").innerHTML = event.beta;
document.getElementById("gamma").innerHTML = event.gamma;
document.getElementById("heading").innerHTML = event.webkitCompassHeading;
document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy;
}
// html
<html>
<head>
<title>DeviceOrientationEventtitle>
<meta charset="UTF-8" />
head>
<body>
<p> ：<span id="alpha">0span>p>
<p> ：<span id="beta">0span>p>
<p> ：<span id="gamma">0span>p>
<p> ：<span id="heading">0span> p>
<p> ：<span id="accuracy">0span> p>
body>
html>四、指北針の例DEMO
DEMO ：http://wqs.jd.com/promote/201608/compass/index.html
Dev
x ： window.compassInitX = 200
y ：window.compassInitY = 50;
： window.compassZoom= 0.5;
五、関連事件
DeviceMotionEvent ，accelaration、accelarationIncludingGravity、rotationRate ， 。
boat ： http://legos.wq.jd.com/legos4.php/package?pid=35&id=3098