我用加速度计和画布2d做错了什么?安卓

时间:2013-12-04 06:13:46

标签: javascript android html5 cordova html5-canvas

我正在尝试使用加速计API创建一个2d画布 当我倾斜手机的加速度x和加速度变化时,API完整示例有效 所以我做了一个画布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那么我可以看到我的圆圈清楚地位于左上角附近。

任何人都可以帮我解决一下我在这里做错了什么?

1 个答案:

答案 0 :(得分:0)

加速x&amp; y键不是绝对的坐标,您可以在其上绘制圆圈。加速度是速度随时间的差异。因此,您可以将它们作为要添加到当前圆圈位置的数量。

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