在画布中间创建等边三角形？

Question

我想在画布中间画一个等边三角形.我试过这个:

ctx.moveTo(canvas.width/2, canvas.height/2-50);
ctx.lineTo(canvas.width/2-50, canvas.height/2+50);
ctx.lineTo(canvas.width/2+50, canvas.height/2+50);
ctx.fill();

但三角形看起来有点太高了.

如何在画布中间画一个等边三角形？

有人告诉我你必须找到等边三角形的高度与等边三角形边的比率.

h:s

这两个数字是什么？

Answer 1

三个角点的等式是

x = r*cos(angle) + x_center
y = r*sin(angle) + y_center

其中,角度= 0,(1./3)*(2*pi),(2./3)*(2*pi); 其中r是刻有三角形的圆的半径.

Answer 2

你必须用三角形的高度来做

var h = side * (Math.sqrt(3)/2);

要么

var h = side * Math.cos(Math.PI/6);

所以这个比例h:s等于:

sqrt( 3 ) / 2 : 1 = cos( ? / 6 ) : 1 ? 0.866025

请参阅:http://jsfiddle.net/rWSKh/2/

Answer 3

一个简单的版本，其中X和Y是您希望在三角形顶部的点：

var height = 100 * (Math.sqrt(3)/2);
context.beginPath();
context.moveTo(X, Y);
context.lineTo(X+50, Y+height);
context.lineTo(X-50, Y+height);
context.lineTo(X, Y);
context.fill();
context.closePath();

这将使所有边的等边三角形=100。将100替换为您希望边长的长度。

找到画布的中点后，如果您也希望它也成为三角形的中点，则可以设置X =中点的X和Y =中点的Y-50（对于100个长度的三角形）。