javascript - 使用 css 和 javascript 的行星位置？

Question

我制作了几个经典的 php/javascript/css 网页，所以这里有一些基本知识，但现在我需要创建一个占星页面，其中包含特定日期和时间的行星位置。

行星位置应通过两个圆圈以图形方式显示，一个圆圈在另一个圆圈内。

两个圆圈都分为 12 个宫位(30 度)。

内圈应显示特定日期和时间(生日)的行星位置，外圈应显示当前行星位置(行星凌日)。

我想我需要一些可读格式的瑞士星历表来源(可能是 xml 或 json？)。

是否可以使用 javascript 或 html canvas 来完成？

我需要一些一般说明 - 从哪里开始，以及完成此任务的最短方法是什么？

Answer 1

一个可能的解决方案是创建两个包含行星的数组。一组行星用于内圈(时间/日期)，一组行星用于外圈(位置)。

我认为外圈是最简单的。对于每个行星，存储可以是圆上的弧度 Angular 位置。例如:

var outerPlanets = [
    { name: 'planet one', position: 0.2},
    { name: 'planet two', position: 1.3}
];

内圈可能很棘手，因为它取决于日期/时间。但一种方法是(再次举例)圆上的 0 度是时间的开始。 360度就是现在。

假设时间的开始是 0，现在是 2000 年，一个行星的生日是 1200。这意味着它应该位于圆上的 (1200/2000)*100% = 60%，即 (360/100)*60 = 216 度。

var innerPlanets = [
    { name: 'planet three', birthday: 1200},
    { name: 'planet four', birthday: 1800}
];

有了这些信息，您可以循环数组，并在 Canvas 上绘制每个行星。

var circleCenterX = 500;
var circleCenterY = 500;

var circleInnerRadius = 200;

var planetX = circleCenterX + (Math.cos(planet.angle) * circleInnerRadius);
var planetY = circleCenterY + (Math.sin(planet.angle) * circleInnerRadius);

需要注意的是: Canvas 上的 Angular 以弧度为单位，而不是度数:

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