画布HTML+；使用Javascript的OOP-多对象和'；依赖性'；

我目前正在学习使用Javascript进行面向对象编程，最近我尝试将canvas作为一个学习和实验OOP的领域。画布也是一个强大的工具。上面这张JSFIDLE表格也是我学习数学和物理的一个机会，在编写代码之前尝试理解一些东西

我在这里试图实现的是一个非常简单的太阳系，我以前在纸上画过，使用HTML画布的类和原型。它现在正在工作，但我想改进它，继续OOP。在不使用对象的情况下，我也受到了一些限制。没有它，事情似乎就不那么“自然”。 . 如您所见，我创建了我的主类循环的实例，但我没有真正充分利用对象及其属性的真正潜力。 在HTML画布中，一个又一个元素将以某种方式“继承”上一个元素的属性，就像月球卫星绕地球旋转一样。我在月球上应用了一个平移，其初始位置基于之前应用于地球的平移。因此，月球将始终“跟随”地球：

// CIRCLE 01 as a earth
ctx.save();
ctx.rotate(((2 * Math.PI) / 60) * t.getSeconds() + ((2 * Math.PI) / 60000) * t.getMilliseconds());
ctx.translate(130, 0);
ctx.beginPath();
ctx.arc(0, 0, circle01.radius, 0, Math.PI * 2, false);
ctx.fill();

// LINE between earth and moon
ctx.beginPath();
ctx.strokeStyle = colorGreen;
ctx.moveTo(circle00.x, circle00.y);
ctx.lineTo(circle02.x + 30, circle02.y);
ctx.stroke();
// orbite circle 01
ctx.beginPath();
ctx.strokeStyle = colorRed;
ctx.arc(0, 0, 30, 0, Math.PI * 2);
ctx.stroke();

// CIRCLE 02 as a moon
ctx.beginPath();
ctx.rotate(((2 * Math.PI) / 6) * t.getSeconds() + ((2 * Math.PI) / 6000) * t.getMilliseconds());
ctx.translate(30, 0);
ctx.arc(0, 0, circle02.radius, 0, Math.PI * 1, false);
ctx.fill();
// simulate the darkside of the moon
ctx.beginPath();
ctx.arc(0, 0, 10, 0, Math.PI * 2);
ctx.stroke();

这是可行的，但这样做似乎“不自然”，我真正想说的是，月球的旋转中心轴将是地球的x和y位置（这是我在问题的主要标题中称之为依赖关系。月球将说依赖于地球）

它们之间的绿线也是如此。我希望这条线始终指向地球的中心轴和月球的中心轴，并随着两者一起移动，正如我试图写的：

ctx.moveTo(circle00.x, circle00.y);
ctx.lineTo(circle02.x + 30, circle02.y);

/////

关于原型速度，我想我必须用一个圆周运动方程来写，包括距离和时间。我找到了维基百科页面的相关链接，但目前我还无法实现它，因为我对数学和物理的知识不多，所以在尝试实现它之前，我需要时间去理解它。 现在，我正在使用我在MDN教程中读到的关于动画和画布的以下代码：

ctx.rotate(((2 * Math.PI) / 60) * t.getSeconds() + ((2 * Math.PI) / 60000) * t.getMilliseconds());

我真的不明白时间对这种动画的影响。 开始时，我使用了基于角度增量的旋转：

var angle = 0;
ctx.rotate((Math.PI / 180) * (angle));
angle += Math.PI / 64;

否则，我尝试在另一个工作表中旋转它，使用DOM、Math.cos和Math.sin方法，如下所示：

formC.style.left = 300 + 20 * Math.cos(angle) + 'px';
formC.style.top = 250 + 20 * Math.sin(angle) + 'px';
angle += 0.05;

////////

我想要实现的是创建可以相互通信并共享其属性的独立对象，并实现管理对象速度的可靠方法。还想更好地理解三角学和毕达哥拉斯定理，以及运动

你能告诉我一个更好的方法来实现它使用面向对象的编程，并解释什么是getSeconds（）和GetMiscells（）方法对动画的影响吗