canvas 实现地球、月球和太阳在漆黑背景中，地球围着太阳转、月球围着地球转

好的，这是一个比较复杂的问题，需要绘制三个不同大小的球体，并模拟它们之间的运动关系。以下是一个基本的实现思路：

1. 创建一个画布，并设置一个黑色背景。
2. 绘制太阳，可以使用 `fillStyle` 属性设置为黄色，并使用 `arc` 方法绘制一个圆形。
3. 绘制地球，可以使用 `fillStyle` 属性设置为蓝色，并使用 `arc` 方法绘制一个圆形。
4. 绘制月球，可以使用 `fillStyle` 属性设置为灰色，并使用 `arc` 方法绘制一个圆形。
5. 计算地球和月球的初始位置，并以太阳为中心绘制它们。
6. 创建一个函数，用于更新地球和月球的位置，可以使用三角函数计算它们的坐标。
7. 使用 `requestAnimationFrame` 方法循环调用更新函数，实现动态效果。

以下是一个简单的示例代码，可以根据需要进行修改和优化：

<canvas id="canvas" width="600" height="600"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const sunRadius = 50;
const earthRadius = 20;
const moonRadius = 10;

let earthAngle = 0;
let moonAngle = 0;

function draw() {
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制太阳
  ctx.fillStyle = 'yellow';
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, sunRadius, 0, Math.PI * 2);
  ctx.fill();

  // 计算地球坐标
  const earthX = canvas.width / 2 + Math.cos(earthAngle) * (sunRadius + 100);
  const earthY = canvas.height / 2 + Math.sin(earthAngle) * (sunRadius + 100);

  // 绘制地球
  ctx.fillStyle = 'blue';
  ctx.beginPath();
  ctx.arc(earthX, earthY, earthRadius, 0, Math.PI * 2);
  ctx.fill();

  // 计算月球坐标
  const moonX = earthX + Math.cos(moonAngle) * (earthRadius + 50);
  const moonY = earthY + Math.sin(moonAngle) * (earthRadius + 50);

  // 绘制月球
  ctx.fillStyle = 'gray';
  ctx.beginPath();
  ctx.arc(moonX, moonY, moonRadius, 0, Math.PI * 2);
  ctx.fill();

  // 更新地球和月球角度
  earthAngle += 0.01;
  moonAngle += 0.05;

  requestAnimationFrame(draw);
}

draw();