我正在尝试在画布上创建一个三角形。但我不确定哪一边是 x1、y1、x2、y2...等。我将我的三角形与本网站上列出的三角形相匹配。但我看到了不同的结果。
下面是我的代码:
var canvasElement = document.querySelector("#canvas");
var ctx = canvasElement.getContext("2d");
// Sides: a = 30 b = 30 c = 59
var triangle = {
x1: 30,
y1: 0,
x2: 0,
y2: 59,
x3: 30,
y3: 59
}
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(triangle.x1, triangle.y1);
ctx.lineTo(triangle.x2, triangle.y2);
ctx.lineTo(triangle.x3, triangle.y3);
ctx.lineTo(triangle.x1, triangle.y1);
ctx.closePath();
ctx.stroke();
<canvas id="canvas" width="300" height="300"></canvas>
问题的免费翻译如何在Javascript中以编程方式在画布上绘制三角形?来自 @Faiz。
在确定了从哪里开始绘制三角形(在这种情况下,第一个顶点在画布的中心)和第二个顶点的位置之后,您需要计算两个等长边之间的角度。接下来,您可以计算第三个顶点的位置。
请阅读我的代码中的注释。
更新
技术委员会评论:
这是更简单的情况,因为所有边和所有角度都相等。以下演示绘制了一个等边三角形。
更新 2
画一个所有边都不同的三角形。为此,我需要使用余弦定律
那里的角度
С
是对面的с
。三角解
知道了这一点,你可以得到角度
C
:let angleC = Math.acos((c*c - a*a - b*b) / (2*a*b) );
来自 @enxaneta的答案的松散翻译 。