Поверните треугольник вокруг его центра с помощью 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).