在画布中间创建等边三角形？ [英] Create equilateral triangle in the middle of canvas?

问题描述

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

I want to draw an equilateral triangle in the middle of canvas. I tried this:

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

但三角形看起来有点高。

But the triangle looks a bit too tall.

如何在画布中间绘制等边三角形？有人告诉我，您必须找到

How can I draw an equilateral triangle in the middle of canvas?

Someone told me you have to find the ratio of the height of an equilateral triangle to the side of an equilateral triangle.

code>

这两个数字是什么？

What are the two numbers?

推荐答案

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

You have to do it with the height of the triangle

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

或

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

所以比例 h：s 等于：

So the ratio h:s is equal to:

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

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

这篇关于在画布中间创建等边三角形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！