Javascript 以圆形路径移动的圆

如何使用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>

var语境；
var x=100；
变量y=250；
var-dx=5；
var-dy=5；
函数move（）
{
context=rectangle.getContext（'2d'）；
设置间隔（抽签，20）；
}
函数绘图（）
{
context.clearRect（0,0400）；
context.beginPath（）；
context.fillStyle=“#0000ff”；
弧（x，y，20，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
x+=dx；
}

---

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

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

这就是你的坐标rcosƟ，rsinƟ

在你的绘图函数中，这样做

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

而不是

x+=dx;

精确选择dƟin弧度，使运动看起来平滑。

---

[还要选择一些可行的变量名，而不是Ɵ和dƟ]

当我把代码放在JSFIDLE中时，这段代码在任何浏览器中似乎都不起作用。也许通过查看这个jquery插件中的代码可以提供一些线索，了解它们是如何画圆的。