如何计算旋转后 HTML5 画布中的点的位置？

看到后this http://codentronix.com/2011/04/27/first-experiment-with-html5-a-wireframe-cube/#comment-2290代码，我不知道公式在哪里x * 新浪 + y * 科萨来自。

在每个间隔之后，一个点绕轴旋转一个a angle.

我需要旋转后该点的 x 和 z 位置。

在提到的文章中x * 新浪 + y * 科萨使用公式。我不明白它是从哪里衍生出来的。

我学习了三角函数，但仍然一无所获。

有人可以帮忙吗？基本思想。一些参考。

首先，他的代码是到 3D 空间的投影，但问题是关于 Z 轴上的旋转，这与 2D 旋转相同，并且 Z 值保持相同。

当你有任何给定的点 (x,y) 时，你就形成了一个直角三角形。看看这张照片：

现在假设a是 15 度

该圆称为单位圆，其半径为1.

• 沿绿线的长度Y轴是sine的角度。
• 沿绿线的长度X轴是cosine的角度。

请注意，这并不重要size由该点的坐标形成的三角形。只要保持相同的角度，正弦和余弦的值就会保持不变，因为这里只有三角形在单位圆内的部分很重要。

The sine是一个点应该在 Y 轴上移动多少，以及cosine是为了使点在空间中移动而在 X 轴上移动多少，keep与最小步长相同的角度（它们的值范围从 0 到 1，即圆的半径）

但是你如何移动空间中的一个点以便change它与原点的角度？

嗯，首先，对于任何与单位圆相交的点，即它的三角形的斜边为1，它的位置是(cosine, sine)，对于单位圆之外的点，例如(2,5)，它的位置是(hypotenuse * cosine, hypotenuse * sine)

想象一下我们有一个观点(x,y) at a距原点的度数，我们想将其旋转b度，这意味着我们想要一个新职位(x',y')角度更改为a+b度，但距原点（斜边）的距离保持不变。

x = hypotenuse * cosine(a)
y = hypotenuse * sine(a)

x' = hypotenuse * cosine(a + b)
y' = hypotenuse * sine(a + b)

通过使用三角角加法 http://mathworld.wolfram.com/TrigonometricAdditionFormulas.html我们有公式

cosine(a + b) = cosine(a) * cosine(b) - sine(a) * sine(b)
sine(a + b) = sine(a) * cosine(b) + cosine(a) * sine(b)

如果我们将其应用到我们的(x',y') we get:

x' = hypotenuse * cosine(a) * cosine(b) - hypotenuse * sine(a) * sine(b)
y' = hypotenuse * sine(a) * cosine(b) + hypotenuse * cosine(a) * sine(b)

如果您还记得我们的定义(x,y)您会注意到这与以下内容完全相同：

x' = x * cosine(b) - y * sine(b)
y' = y * cosine(b) + x * sine(b)

我们的网站上就有你的神秘公式y'，只是加法的顺序颠倒了。