javascript - 关于画布动画和设备运动的问题

Question

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

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

Answer 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';
});