3つのlenthsに基づいてHTMLキャンバスに三角形を描く

Question

HTMLキャンバスの中央に三角形を描画する関数を3つの長さに基づいて作成しようとしていますが、これは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² + Cy² = R2² 
(Cx-R3)² + Cy² = R1² 

に低減し、CxそのCyからを計算することを可能にする差

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

に示す第3の点を満足2円方程式

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

。コードで

が、それは次のようになります。

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>