重力感应需JavaScript监听devicemotion/deviceorientation事件，仅支持真实移动设备；摇一摇用accelerationIncludingGravity计算加速度变化率，设阈值1500–2500并防抖；倾斜控制用beta/gamma映射交互，注意HTTPS、用户交互及系统权限。
重力感应在 HTML 中无法直接“做”，必须靠 JavaScript 监听设备原生事件，且仅限真实移动设备（iOS/Android）；桌面浏览器即使开启模拟器，deviceorientation 和 devicemotion 也常返回空值或不触发。
用 devicemotion 检测摇一摇动作
这是最常用、兼容性最好的方式，适合「摇一摇换色」「摇一摇抽奖」等场景。核心是算加速度变化率，不是单纯读 x/y/z 值。
- 必须用
accelerationIncludingGravity，不能只用acceleration（后者在 iOS 上常为null） -
SHAKE_THRESHOLD建议设在1500–2500区间，太低易误触，太高难触发 - 时间差要控制在
100ms左右，否则speed计算失真——示例里用diffTime归一化很关键 - 首次触发后建议加防抖：比如
lastShakeTime记录上一次成功时间，间隔1500ms内不再响应
简版逻辑：
let lastX = 0, lastY = 0, lastZ = 0, lastTime = 0;
const THRESHOLD = 2000;
<p>function handleMotion(e) {
const acc = e.accelerationIncludingGravity;
const now = Date.now();
if (now - lastTime > 100) {
const speed = Math.abs(acc.x + acc.y + acc.z - lastX - lastY - lastZ) / (now - lastTime) <em> 10000;
if (speed > THRESHOLD) {
// 执行摇一摇逻辑
document.body.style.backgroundColor = '#' + Math.floor(Math.random()</em>16777215).toString(16);
}
[lastX, lastY, lastZ, lastTime] = [acc.x, acc.y, acc.z, now];
}
}</p><p>if ('DeviceMotionEvent' in window) {
window.addEventListener('devicemotion', handleMotion);
}
用 deviceorientation 实现倾斜控制小球移动
适合「小球随手机倾斜滚动」「菜单随角度滑动」类交互。它提供的是设备朝向（α/β/γ），不是加速度，所以更平滑但响应略慢。
立即学习“前端免费学习笔记（深入）”；
-
beta对应前后倾斜（绕 X 轴），gamma对应左右倾斜（绕 Y 轴），alpha是方向角（常受干扰，慎用） - iOS Safari 默认禁用
deviceorientation，需用户手动开启「运动与方向」权限（设置 → Safari → 运动与方向） - Android Chrome 从 v98 起要求页面为 HTTPS 且用户有过交互（如点击）后才允许触发，否则
beta/gamma恒为0 - 数值有正负和量纲差异：iOS beta 范围约
-90~90，Android 可能到-180~180，建议先做归一化或截断
例如控制 canvas 小球位置：
let ballX = canvas.width / 2, ballY = canvas.height / 2;
<p>function handleOrientation(e) {
// gamma: 左右倾斜 → 控制 X；beta: 前后倾斜 → 控制 Y
ballX += e.gamma <em> 0.5; // 系数调灵敏度
ballY += e.beta </em> 0.5;
ballX = Math.max(20, Math.min(canvas.width - 20, ballX));
ballY = Math.max(20, Math.min(canvas.height - 20, ballY));
}</p><p>if ('DeviceOrientationEvent' in window) {
window.addEventListener('deviceorientation', handleOrientation);
}
为什么本地开发时总没反应？
不是代码问题，大概率是环境或权限卡点：
- 必须通过 HTTPS 或
localhost访问——file://协议下所有重力 API 均被现代浏览器禁用 - iOS 设备需确认：设置 → 隐私与安全性 → 运动与方向 → 开启「网站可访问」
- Chrome Android 要求用户至少有一次点击/触摸行为后，才能激活传感器（可在页面加个「开始体验」按钮，点击后再绑定事件）
- 某些安卓厂商定制系统（如华为 EMUI）会默认关闭传感器权限，需进「应用管理 → 浏览器 → 权限管理 → 体感传感器」手动打开
Canvas 小球碰撞动画要不要用 Box2D？
除非你真需要物理引擎级的刚体碰撞（旋转、摩擦、多边形支撑），否则别用 Box2D。它体积大（~300KB）、API 陡峭、移动端性能吃紧，且和重力感应是两套逻辑——Box2D 自己模拟重力，而你要的是真实设备重力驱动。
- 简单碰撞：canvas + 手写球体边界检测（距离公式）+ 速度向量反射，20 行内搞定
- 中等复杂度：用
matter-js（轻量、现代、文档好），它支持直接传入自定义重力向量，可把deviceorientation的beta/gamma映射为world.gravity.x/y - Box2D 的
b2World初始化依赖全局坐标系，和移动端 viewport 缩放、dpr 不匹配时容易错位，调试成本远高于收益
真正容易被忽略的点：重力感应数据是高频（60Hz+）但不可靠的，devicemotion 在静止时仍有微小漂移，deviceorientation 在快速转动时有延迟。所有逻辑都得加滤波（比如滑动平均）或置信判断，不能 raw data 拿来就用。
