DeviceMotionEvent API All In One

DeviceMotionEvent API All In One

设备运动事件 / 设备动作事件

https://caniuse.com/?search=DeviceMotionEvent

Warning: Currently, Firefox and Chrome do not handle the coordinates the same way.
Take care about this while using them.
警告：目前，Firefox 和 Chrome 处理坐标的方式不同。
使用它们时请注意这一点。

https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent

new DeviceMotionEvent(type)

new DeviceMotionEvent(type, options)

https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent/DeviceMotionEvent

https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEventAcceleration

https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEventRotationRate

devicemotion

window.addEventListener('devicemotion', (event) => {
  console.log(`event =`, event);
});

window.ondevicemotion = (event) => {
  // console.log(`event =`, event);
};

function handleMotionEvent(event) {
    // 重力加速度
    const x = event.accelerationIncludingGravity.x;
    const y = event.accelerationIncludingGravity.y;
    const z = event.accelerationIncludingGravity.z;
    // Do something awesome.
}

window.addEventListener("devicemotion", handleMotionEvent, true);

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicemotion_event

DeviceOrientation Event Specification

Editor’s Draft, 30 January 2023

https://w3c.github.io/deviceorientation/#devicemotion

demos

https://codepen.io/xgqfrms/pen/oNPemaP?editors=1010

refs

H5 实现摇一摇

HTML5 提供的 DOM事件来获得设备物理方向及运动的信息，包括：陀螺仪、罗盘及加速计。

deviceorientation，其提供设备的物理方向信息，表示为一系列本地坐标系的旋角。

devicemotion，其提供设备的加速信息，表示为定义在设备上的坐标系中的迪卡尔坐标。其还提供了设备在坐标系中的自转速率。

compassneedscalibration，其用于使用罗盘信息校准上述事件。

http://leooman.com/src/web/devicemotion.html

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---