javascript - 我的加速度计和canvas 2d 做错了什么？安卓

Question

我正在尝试使用加速度计 API 创建 2d Canvas 。
当我倾斜手机时，API 完整示例将起作用，acceleration.x 和 Acceleration.y 会发生变化。
因此，我制作了一个 Canvas 2d 圆并实现了 Acceleration.x 和 Acceleration.y，但是当我这样做时，圆就消失了。

这是我的html

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.</canvas>

这是我的部分脚本

   function movingCircle (acceleration) {
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            var x = acceleration.x;
            var y = acceleration.y;
            ctx.fillStyle = "rgba(255, 255, 0, .5)";
            ctx.beginPath();
            ctx.arc(x,y,20,0,2*Math.PI, true);
            ctx.stroke();
            ctx.closePath();
            ctx.fill();
            c.innerHTML = 'testing';
       }

ctx.arc(x,y,20,0,2*Math.PI, true); 如果我将 x 和 y 更改为 47.5, 25 那么我可以看到我的圆清晰定位靠近左上角。

任何人都可以帮我解决我在这里做错的事情吗？

Answer 1

Acceleration 的 x 和 y 键不是您可以在其上绘制圆的绝对坐标。加速度是速度随时间的变化。因此，您应该将它们作为数量添加到您当前的圈子位置。

类似于:x = x + Acceleration.x;