圈子在圆形路径中移动

Question

如何使用HTML5和javascript在圆形路径中移动圆圈 下面给出了我在线性路径中移动圆的代码。如何将路径更改为循环路径？

 <script>

   var context;
   var x=100;
   var y=250;
   var dx=5;
   var dy=5;

    function move()
    {
     context= rectangle.getContext('2d');
     setInterval(draw,20);
    }

   function draw()
   {
    context.clearRect(0,0,400,400);
    context.beginPath();
    context.fillStyle="#0000ff";

    context.arc(x,y,20,0,Math.PI*2,true);
    context.closePath();
    context.fill();

    x+=dx;


   }
  </script>

    <canvas id="rectangle" width="400" height="400" style="border:1px solid #000000;" >
    </canvas>
    <input type="button" onClick="move();" width="100" height="100" value="click "/>

</body>

Answer 1

你已经做了一切;现在为了在圆圈而不是在一条线上移动它，你需要选择一个dƟ而不是dx，这样你就可以移动x和y坐标。

现在假设您的中心位于（a，b）并且路径半径为r，那么您的路径将如下所示：

所以你有坐标r cosƟ，r sinƟ

所以在你的绘制功能中这样做

x=a+r*cos(Ɵ);
y=b+r*sin(Ɵ);
Ɵ+=dƟ;

而不是

x+=dx;

精确选择弧度为dƟ，使运动看起来平滑。 [也选择一些可行的变量名而不是Ɵ和dƟ]