javascript - 在 Canvas 中间创建等边三 Angular 形？

Question

我想在 Canvas 中间画一个等边三 Angular 形。我试过这个:

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();

但是三 Angular 形看起来有点太高了。

如何在canvas中间画一个等边三 Angular 形？

有人告诉我，你必须找到等边三 Angular 形的高与等边三 Angular 形的边的比值。

h:s

这两个数字是多少？

Answer 1

三个 Angular 点的方程是

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

其中 Angular = 0、(1./3)*(2*pi) 和 (2./3)*(2*pi)；其中 r 是三 Angular 形内切圆的半径。