使用JavaScript在其中心周围旋转三角形

Question

星期五晚了,我在这个问题上摸不着头脑.

我试图绘制一个等边三角形并围绕它的中心旋转但由于某种原因我无法确定它的中心点.

这是一个JSFiddle,你可以看到我如何转换到画布的中心,然后使用等式从那里绘制三角形:

var width = 30;
var height = width * (Math.sqrt(3)/2);

确定宽度/高度的比例.

我在这里错过了什么？任何想法都将非常感激.

Answer 1

您围绕 (0, 0) 旋转，在本例中，它不是三角形的中心。

具有顶点 (0, -h / 2)、(w / 2, h / 2)、(-w / 2, h / 2) 的三角形的中心是这三个位置的平均值。很明显，(1/3)(-h / 2) + (2/3)(h / 2) = h / 6。这就是三角形中心的实际y 坐标。

一种解决方案可能是将三角形移动到 (0, (-2/3)*h)、(w / 2, h / 3)、(-w / 2, h / 3)。