javascript - 在圆形路径中移动的圆圈

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Ɵ]