javascript - 计算轨道物体的位置

Question

我正在使用 Canvas 创建太阳系动画，但在计算对象的位置 (x,y) 值时遇到问题。

地球围绕太阳运行，我需要在每一帧计算和更新地球的位置。并使用地球的位置，我将围绕地球绕月球运行。

相关函数是这样的:

orbitAround : function (master) {
    master.makeOrbitCenter();
    this.increaseOrbitAngle();
    context.rotate(this.orbit.angle * Math.PI/180);
    context.translate(this.orbit.distance, 0);

    // calculate and update the X and Y position of the earth
    // so that luna can orbit around earth
    // these are the initial values of earth
    this.position.x = master.position.x + this.orbit.distance;
    this.position.y = master.position.y;
},

Fiddle demo

为了简单起见，我画了这张图



假设蓝色圆盘是地球，位于 (300,200)。太阳在(200,200)，它们之间的距离是100。地球绕太阳旋转45度后，它的位置会是什么？如何使用给定的值计算它？

Answer 1

看起来你在那里有一些工作，但这里有一个分割:
Math.cos和 Math.sin返回理论值 x和 y沿轴定位。他们需要在 radians 中给出 Angular .

因此，为了获得 45 度 Angular 的位置，您基本上需要首先计算度数的弧度当量。

var degrees = 45;
var radians = degrees * (Math.PI / 180);

这里的结果是 0.785398163。然后您可以获得 x和 y使用此轨道物体的坐标:

var x = Math.cos(0.785398163) * distance;
var y = Math.sin(0.785398163) * distance;

单个帧的整个过程如下所示:

var distance = 100; // from the centre of orbit
var degrees = 45; // around a 360 degree orbit
var radians = degrees * (Math.PI / 180);

var x = Math.cos(radians) * distance;
var y = Math.sin(radians) * distance;

这是一个非常基本的 fiddle与方形行星和一切。