Question

我正在制作一个带有预制行星的太阳系，并希望知道如何让不止一个绕太阳旋转。我遇到了无法一次旋转2的问题。任何解决方案？这是当前代码：

轨道页面： var canvasP = document.getElementById("planetsOrbit"); var ctx2 = canvasP.getContext("2d"); var angle = 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();

和Premade Planets：

//太阳

 solus = function(xAxis, yAxis, radius) {
ctx.shadowBlur=400
ctx.shadowColor="red"
ctx.fillStyle ="#ff9900";
ctx.beginPath(); 
ctx.arc(xAxis, yAxis, radius, 0, Math.PI * 2, false)     
ctx.fill();
ctx.shadowBlur = 0;
}

//Fighting Pits
pits = function(xAxis, yAxis, radius) {
ctx.beginPath();
ctx.fillStyle ="#990000"
ctx.arc(xAxis, yAxis, radius, 0, Math.PI , false)     
ctx.moveTo(xSpot1,ySpot1)
ctx.lineTo(xSpot1,ySpot2)
ctx.lineTo(xSpot2,ySpot2)
ctx.lineTo(xSpot2,ySpot3)
ctx.lineTo(xSpot3,ySpot4)
ctx.lineTo(xSpot4,ySpot3)
ctx.lineTo(xSpot4,ySpot2)
ctx.lineTo(xSpot5,ySpot2)
ctx.lineTo(xSpot5,ySpot1)
ctx.lineTo(xSpot1,ySpot1)
ctx.fill();

} 



 //Water Planet

 roa = function(xAxis, yAxis, radius) {
 ctx2.shadowBlur = 0;
 ctx2.beginPath(); 
 ctx2.fillStyle ="#00ffff"
 ctx2.arc(xAxis, yAxis, radius, 0, Math.PI * 2, false) 
 ctx2.fill();

 }


//Forest planet atmoshpere
eldridA = function(xAxis, yAxis, radius) {
ctx.beginPath(); 
ctx.fillStyle ="rgba(230, 230, 230, 0.3)";
ctx.arc(xAxis, yAxis, radius, 0, Math.PI * 2, false) 
ctx.fill();

}
//forest core
eldrid = function(xAxis, yAxis, radius) {
ctx.shadowColor = "rgba(230, 230, 230, 0.2)";
ctx.shadowBlur = 200;
ctx.beginPath(); 
ctx.fillStyle ="#ff9900"
ctx.arc(xAxis, yAxis, radius / 2, 0, Math.PI * 2, false) 
ctx.fill();
xAxis2 = xAxis - window.innerWidth * 0.009 
yAxis2 = yAxis + window.innerHeight * 0.007
ctx.arc(xAxis2, yAxis2, radius / 4, 0, Math.PI * 2, false) 
ctx.fill();
ctx.beginPath();
xAxis3 = xAxis + window.innerWidth * 0.011
ctx.arc(xAxis3 , yAxis2, radius / 3, 0, Math.PI * 2, false) 
ctx.fill();
ctx.beginPath();
yAxis3 = yAxis - window.innerHeight * 0.03 
ctx.arc(xAxis, yAxis3, radius / 3, 0, Math.PI * 2, false) 
ctx.fill();
ctx.shadowBlur = 0;
ctx.shadowColor = null;
}

那么我怎么能让一个以上的行星绕太阳运行呢？任何帮助表示赞赏。

Answer 1

我用帆布做了一个有多个行星的太阳系的简单演示：http://codepen.io/giladaya/pen/PWWKLP

我相信您可以轻松地根据您的需求进行调整，我将解释代码的主要部分：

每个行星都有自己的属性，如半径，距离中心的距离，径向速度和绘制函数的参考。

$ more src/main/resources/application.properties
missing.file=Please select a file.
protocol=http
hostname=localhost
port=9080
baseUrl=rest
FILER_HOME=/Applications/CF_Files
FILER_UPLOAD_LOCATION=/Applications/CF_Files/archive
META_DATA_FILE_NAME=metadata.properties

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

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
  }
];

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

每个行星的绘制功能可以像您想要的那样复杂，以便在地球上拥有更多元素。例如：

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);
}

如何设置多个轨道画布图（纯js）

1 个答案: