关于画布动画和设备运动的问题答案

【问题标题】：Question about canvas animation and device motion关于画布动画和设备运动的问题
【发布时间】：2019-10-06 00:15:43
【问题描述】：

我想在我的画布上实现设备运动，当我移动手机时，画布也将沿着 x 和 y 轴移动，以便画布可以显示更多图像。但我无法弄清楚如何通过javascript来做到这一点。我是否需要先创建画布动画并向其中添加设备运动事件侦听器？如果是这样，我如何将动画代码与我的设备运动代码（所有加速的东西）结合起来。或者我只是将设备运动事件侦听器添加到我的画布以便它移动？我的感觉是我需要先写一个动画，但不确定我是否正确。

希望我的解释是有道理的。谢谢！

【问题讨论】：

标签： javascript html animation canvas devicemotion

【解决方案1】：

var canvas = document.createElement('canvas');
window.addEventListener('devicemotion', function(event) {
  canvas.style.left = event.acceleration.x + 'px';
  canvas.style.top = event.acceleration.y + 'px';
});

【讨论】：