根據三個給定的長度在HTML畫布中繪制一個三角形

Question

我正在嘗試創建一個函數，該函數基於三個給定的長度在HTML畫布的中間繪制一個三角形，我認為這是HTML畫布的簡單介紹，我錯了。

這是我到目前為止的位置，但是側面無法正確渲染：

function drawTriangle(sideOne, sideTwo, sideThree) {
    var canvas = document.getElementById('triangle-canvas');
    var ctx = canvas.getContext('2d');

    var cx = canvas.width / 2;
    var cy = canvas.height / 4;

    var sideOneHeight = sideOne * (Math.sqrt(3) / 2);
    var sideTwoHeight = sideTwo * (Math.sqrt(3) / 2);

    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + 50, cy + sideOneHeight);
    ctx.lineTo(cx - 50, cy + sideTwoHeight);
    ctx.lineTo(cx, cy);
    ctx.fill();
    ctx.closePath();

}

有什么建議么？

Answer 1

設置Ax=0, Ay=0 ，設置Bx=R3, By=0 。 然后第三點滿足兩個圓方程

(Cx-Ax)² + (Cy-Ay)² = R2²
(Cx-Bx)² + (Cy-By)² = R1²

給定所選坐標，該坐標減少為

Cx² + Cy² = R2²
(Cx-R3)² + Cy² = R1²

和區別

 2*Cx*R3 = R2²+R3²-R1²

它允許從那個Cy計算Cx 。

在代碼中，它看起來像這樣：

  var canvas = document.getElementById('triangle-canvas'); var ctx = canvas.getContext('2d'); var R1=120, R2=140, R3=90; var Ax=0, Ay=0; var Bx=R3, By=0; var Cx=(R2*R1+R3*R3-R1*R1)/(2*R3); var Cy=Math.sqrt(R2*R2-Cx*Cx); var Ox = canvas.width / 2 - Bx/2; var Oy = canvas.height / 2 + Cy/2; ctx.beginPath(); ctx.moveTo(Ox+Ax, Oy-Ay); ctx.lineTo(Ox+Bx, Oy-By); ctx.lineTo(Ox+Cx, Oy-Cy); ctx.closePath(); ctx.fillStyle="gold"; ctx.lineWidth=2; ctx.stroke(); ctx.fill(); 

 <canvas id='triangle-canvas' height=200 width=400></canvas> 

Answer 2

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "20px Times New Roman"; ctx.fillStyle = "black"; ctx.textAlign = "center"; ctx.strokeStyle = "black"; var canvasSize = [parseInt(c.width), parseInt(c.height)]; var _side_1 = 5, _side_2 = 3, _side_3 = 4; //All values are taken assuming as centimeter unit. var factor = 37.7952755906; var sides = [_side_1, _side_2, _side_3]; sides.sort(function(a, b){return ab}); var halfPerimeter = (_side_1 + _side_2 + _side_3) / 2; var area = Math.sqrt(halfPerimeter * (halfPerimeter - _side_1) * (halfPerimeter - _side_2) * (halfPerimeter - _side_3)); var height = ((2 * area) / sides[2]).toPrecision(5); var slopeOfBase = Math.sqrt(Math.pow(sides[0], 2) - Math.pow(height, 2)); ctx.beginPath(); ctx.setLineDash([]); ctx.moveTo((canvasSize[0]/2 - 0.5 * sides[2] * factor), (canvasSize[1]/2 + 0.5 * height * factor)); ctx.lineTo((canvasSize[0]/2 + 0.5 * sides[2] * factor), (canvasSize[1]/2 + 0.5 * height * factor)); ctx.fillText("c = " + sides[2] + " cm",(canvasSize[0]/2 - 0.5 * sides[2] * factor + canvasSize[0]/2 + 0.5 * sides[2] * factor) / 2,(canvasSize[1]/2 + 0.5 * height * factor + canvasSize[1]/2 + 0.5 * height * factor) / 2 + 15); ctx.lineTo((canvasSize[0]/2 + 0.5 * sides[2] * factor - slopeOfBase * factor), (canvasSize[1]/2 - 0.5 * height * factor)); ctx.fillText("b = " + sides[0] + " cm",(canvasSize[0]/2 + 0.5 * sides[2] * factor + canvasSize[0]/2 + 0.5 * sides[2] * factor - slopeOfBase * factor) / 2 + 50,(canvasSize[1]/2 + 0.5 * height * factor + canvasSize[1]/2 - 0.5 * height * factor) / 2); ctx.lineTo((canvasSize[0]/2 - 0.5 * sides[2] * factor), (canvasSize[1]/2 + 0.5 * height * factor)); ctx.fillText("a = " + sides[1] + " cm",(canvasSize[0]/2 + 0.5 * sides[2] * factor - slopeOfBase * factor + canvasSize[0]/2 - 0.5 * sides[2] * factor) / 2 - 50,(canvasSize[1]/2 - 0.5 * height * factor + canvasSize[1]/2 + 0.5 * height * factor) / 2); ctx.stroke(); ctx.beginPath(); ctx.setLineDash([5]); ctx.moveTo((canvasSize[0]/2 + 0.5 * sides[2] * factor - slopeOfBase * factor), (canvasSize[1]/2 - 0.5 * height * factor)); ctx.lineTo((canvasSize[0]/2 + 0.5 * sides[2] * factor - slopeOfBase * factor), (canvasSize[1]/2 + 0.5 * height * factor)); ctx.fillText("h = " + height + " cm",(canvasSize[0]/2 + 0.5 * sides[2] * factor - slopeOfBase * factor + canvasSize[0]/2 + 0.5 * sides[2] * factor - slopeOfBase * factor) / 2,(canvasSize[1]/2 - 0.5 * height * factor + canvasSize[1]/2 + 0.5 * height * factor) / 2 + 20); ctx.stroke(); 

 <canvas id="myCanvas" width="600" height="500"></canvas>