我正在使用 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度后,它的位置会是什么?如何使用给定的值计算它?
最佳答案
看起来你在那里有一些工作,但这里有一个分割: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与方形行星和一切。
关于javascript - 计算轨道物体的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29526438/