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

时间:2012-03-24 02:04:41

标签: javascript html5 canvas geometry

星期五已经很晚了,我在这个问题上摸不着头脑。

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

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

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

确定宽度/高度的比率。

我在这里缺少什么?任何想法都会受到最高的赞赏。

1 个答案:

答案 0 :(得分:4)

你正在转动(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)。