javascript - 根据三个给定的长度在 HTML canvas 中绘制一个三 Angular 形

Question

我正在尝试创建一个函数，根据三个给定的长度在 HTML Canvas 中间绘制一个三 Angular 形，我认为这将是对 HTML Canvas 的简单介绍，但我错了。

这是我目前的位置，但侧面渲染不正确:

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²

它允许计算 Cx 并根据 Cy。

在代码中它看起来像这样:

    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>