使用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）。