我正在尝试使用加速计API创建2D画布。
当我倾斜手机时,API完整示例有效,acceleration.x和acceleration.y会发生变化。
因此,我制作了一个画布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,则可以清楚地看到圆位于左上角附近。有人可以帮我一下我在这里做错了什么吗?
最佳答案
Acceleration的x
和y
键不是可以在其上绘制圆的绝对坐标。加速度是速度随时间的差异。因此,宁可将它们作为要添加到当前圆位置的数量。
类似于:x = x + acceleration.x;