Question

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

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

两个圆圈分为12个房屋（30度）。

内圈应显示某个日期和时间（生日）的行星位置，外圈应显示当前行星位置（行星过渡）。

我想我需要一些可读格式的瑞士星历源（可能是xml或json？）。

是否可以使用javascript和html画布？

我需要一些一般性说明 - 从哪里开始，以及可能是完成此任务的最短途径？

Answer 1

一种可能的解决方案是创建两个包含行星的阵列。一个阵列有内圈的行星（时间/日期），一个用于外圈（位置）。

外圈是最简单的猜测。对于每个行星，存储位置，该位置可以是圆上的弧度角。例如：

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

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

让我们说时间的开头是0，现在是2000，行星的生日是1200.这意味着它应该位于（1200/2000）* 100％= 60％on圆圈，即（360/100）* 60 = 216度。

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

使用该信息，您可以遍历数组，并在画布上绘制每个行星。

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

需要注意的一点是：画布上的角度是弧度，而不是度数：

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

使用css和javascript的行星位置？

1 个答案: