Javascript 在画布中间创建等边三角形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8935930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create equilateral triangle in the middle of canvas?
提问by auroranil
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.
有人告诉我你必须找到等边三角形的高与等边三角形的边之比。
h:s
What are the two numbers?
这两个数字是多少？
回答by tom10
The equation for the three corner points is
三个角点的方程为
x = r*cos(angle) + x_center
y = r*sin(angle) + y_center
where for angle = 0, (1./3)*(2*pi), and (2./3)*(2*pi); and where r is the radius of the circle in which the triangle is inscribed.
其中角度 = 0、(1./3)*(2*pi) 和 (2./3)*(2*pi)；其中 r 是三角形内切圆的半径。
回答by Diode
You have to do it with the height of the triangle
你必须用三角形的高度来做
var h = side * (Math.sqrt(3)/2);
or
或者
var h = side * Math.cos(Math.PI/6);
So the ratio h:sis equal to:
所以比率h:s等于：
sqrt( 3 ) / 2 : 1 = cos( π / 6 ) : 1 ≈ 0.866025
回答by Instinct
A simple version where X and Y are the points you want to top of the triangle to be:
一个简单的版本，其中 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();
This makes an equilateral triange with all sides = 100. Replace 100 with how long you want your side lengths to be.
这将生成一个所有边 = 100 的等边三角形。将 100 替换为您希望边长的长度。
After you find the midpoint of the canvas, if you want that to be your triangle's midpoint as well you can set X = midpoint's X and Y = midpoint's Y - 50 (for a 100 length triangle).
找到画布的中点后，如果您也希望它成为三角形的中点，则可以设置 X = 中点的 X 和 Y = 中点的 Y - 50（对于 100 长的三角形）。
回答by Jeffrey Sweeney
The side lengths will not be equal given those coordinates.
给定这些坐标，边长将不相等。
The horizontal line constructed on the bottom has a length of 100, but the other sides are actually the hypotenuse of a 50x100 triangle ( approx. 112).
在底部构建的水平线的长度为 100，但其他边实际上是 50x100 三角形的斜边（约 112）。
回答by j08691
I can get you started with drawing an equilateral triangle but I don't have the time to get it centered.
我可以让你开始画一个等边三角形，但我没有时间让它居中。
var ax=0;
var ay=0;
var bx=0;
var by=150;
var dx=bx-ax
var dy=by-ay;
var dangle = Math.atan2(dy, dx) - Math.PI / 3;
var sideDist = Math.sqrt(dx * dx + dy * dy);
var cx = Math.cos(dangle) * sideDist + ax;
var cy = Math.sin(dangle) * sideDist + ay;
var canvas = document.getElementById('equ');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(ax,ay);
ctx.lineTo(bx,by);
ctx.lineTo(cx,cy);
ctx.fill();
回答by sirjay
my code for drawing triangle also depending on direction (for lines). code is for Raphael lib.
我绘制三角形的代码也取决于方向（对于线）。代码用于 Raphael lib。
drawTriangle(x2 - x1, y2 - y1, x2, y2);
function drawTriangle(dx, dy, midX, midY) {
var diff = 0;
var cos = 0.866;
var sin = 0.500;
var length = Math.sqrt(dx * dx + dy * dy) * 0.8;
dx = 8 * (dx / length);
dy = 8 * (dy / length);
var pX1 = (midX + diff) - (dx * cos + dy * -sin);
var pY1 = midY - (dx * sin + dy * cos);
var pX2 = (midX + diff) - (dx * cos + dy * sin);
var pY2 = midY - (dx * -sin + dy * cos);
return [
"M", midX + diff, midY,
"L", pX1, pY1,
"L", pX2, pY2,
"L", midX + diff, midY
].join(",");
}
