我将有 3 个输入和一个按钮。单击此按钮时,您应该绘制一个三 Angular 形,其中 3 条边的长度等于输入中的值。如何组织呢?我发现了这个:
context.beginPath();
context.moveTo(30, 20);
context.lineTo(some_value1,some_value2);
context.lineTo(some_value3,some_value4);
context.closePath();
但是这种方法适合在两侧绘制。 我希望现在我已经详细描述了这个问题。提前致谢。
最佳答案
您需要首先计算每个点的笛卡尔坐标。您可以将第一个点设置为[0, 0]
,第二个点将位于[x1, 0]
,其中x1
是长度第一行。第三点需要计算,看看这里是如何完成的:
// hardcoded, but you would get those from user
var AB = 40;
var BC = 50;
var AC = 30;
var A = [0, 0]; // starting coordinates
var B = [0, AB];
var C = [];
// calculate third point
C[1] = (AB * AB + AC * AC - BC * BC) / (2 * AB);
C[0] = Math.sqrt(AC * AC - C[1] * C[1]);
console.log(A, B, C);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(A[0], A[1]);
ctx.lineTo(B[0], B[1]);
ctx.lineTo(C[0], C[1]);
ctx.fill();
<canvas id="canvas" width="500" height="500"></canvas>
关于javascript - JS如何画三边三 Angular 形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49996758/