Javascript 如何设置多个动态画布图形（纯js）

我正在制作一个带有预制行星的太阳系，我想知道如何让多个行星围绕太阳旋转。我遇到了无法同时旋转2的问题。有解决方案吗？以下是当前代码：

轨道页面： var canvasP=document.getElementById（“planetsOrbit”）； var ctx2=canvasP.getContext（“2d”）； 变量角度=6*Math.PI/180

var cx = window.innerWidth / 2;
var cy = window.innerHeight / 2.12;
var radiusNew = (window.innerHeight + window.innerWidth) * 0.15;



function resizeCanvasPOrbit() {
ctx2.clearRect(0, 0, canvasP.width, canvasP.height);
 if (canvasP.width < window.innerWidth) {
   canvasP.width = window.innerWidth * 0.99;
   }' 

  if (canvasP.height < window.innerHeight)
   {
    canvasP.height = window.innerHeight * 0.98;
    }
w = canvasP.width
h = canvasP.height
}


 function draw(x, y) {
    ctx2.clearRect(0, 0, w, h);
    ctx2.save();
   ctx2.beginPath();
   ctx2.beginPath();
   roa(x, y, window.innerHeight * window.innerWidth * 0.00008);
   ctx2.stroke();
   ctx2.restore();
 };

  function keepDrawing() {
     ctx2.clearRect(0, 0, w, h);
     draw(newX, newY);
     setTimeout(keepDrawing, 250);
 }

 window.requestAnimFrame = (function (callback) {
   return window.requestAnimationFrame ||
       window.webkitRequestAnimationFrame ||
       window.mozRequestAnimationFrame ||
       window.oRequestAnimationFrame ||
       window.msRequestAnimationFrame || 
       function (callback) { 
        window.setTimeout(callback, 5000 / 60); 
        };
      })();

 var fps = 60;

 function animate() {
  setTimeout(function () {
    requestAnimationFrame(animate);

    // increase the angle of rotation A.K.A SPEED!
    angle += 1 * Math.PI / 3600;

    //calculate the new ball.x / ball.y
    var newX = cx - radiusNew * Math.cos(angle);
       var newY = cy + radiusNew * Math.sin(angle);

       //draw
      ctx2.clearRect(0, 0, w, h);
      draw(newX, newY);

       //draw the centerpoint 
      ctx2.beginPath();
      ctx2.arc(cx, cy, radiusNew, 0, Math.PI * 2, false);
      ctx2.closePath();

  }, 1000 / fps);
 }
animate();

---

那么我怎样才能让不止一颗行星绕太阳运行呢？非常感谢您的帮助。

我用canvas做了一个简单的演示，演示了一个有多个行星的太阳系：

我相信您可以很容易地将其适应您的需要，我将解释代码的主要部分：

每颗行星都有自己的属性，如半径、距中心的距离、径向速度和对绘图函数的引用

var planets = [
  {
    name: 'sun',      // for reference
    rad: 30,          // Planet radius
    distance: 0,      // Planet distance from center
    rv: 0,            // radial velocity (deg/sec)
    drawFunc: drawSun // draw function
  },
  {
    name: 'foo',
    rad: 10,
    distance: 70,
    rv: 1,
    drawFunc: drawBlue
  },
  {
    name: 'bar',
    rad: 15,
    distance: 100,
    rv: 2,
    drawFunc: drawRed
  }
];

主环遍历所有行星，根据径向速度更新它们当前的角度，并将每个行星绘制到新的更新位置

function draw() {
  ctx.fillRect(-cW/2, -cH/2, cW, cH);

  var now = Date.now(), 
      dts = (now - lastFrameTime) / 1000;
  planets.forEach(function(planet, idx){
    var theta = 0;
    planetsAngle[idx] += planet.rv/Math.PI * dts;
    theta = planetsAngle[idx];
    var x = planet.distance * Math.cos(theta);
    var y = planet.distance * Math.sin(theta);
    planet.drawFunc(ctx, x, y, planet.rad);
  });
  lastFrameTime = now;
  requestAnimationFrame(draw);
}

请注意，如果使用requestAnimationFrame，则不需要设置计时器

为了在行星上拥有更多元素，每个行星的绘制功能可以根据您的需要进行复杂化。例如：

function drawRed(ctx, x, y, rad) {
  ctx.save();
  ctx.fillStyle = 'red';
  ctx.translate(x, y);
  ctx.beginPath();
  ctx.arc(0, 0, rad, 0, 2*Math.PI , false);
  ctx.fill();
  ctx.fillStyle = '#A00';
  ctx.fillRect(-4, -4, 8, 8);
  ctx.restore();  
}

---

谢谢Giladd，应该会帮上很大的忙，让我明天完成。

function drawRed(ctx, x, y, rad) {
  ctx.save();
  ctx.fillStyle = 'red';
  ctx.translate(x, y);
  ctx.beginPath();
  ctx.arc(0, 0, rad, 0, 2*Math.PI , false);
  ctx.fill();
  ctx.fillStyle = '#A00';
  ctx.fillRect(-4, -4, 8, 8);
  ctx.restore();  
}