Draw a triangle in HTML canvas based on three give

问题:

I'm trying to create a function that draws a triangle in the middle of an HTML canvas based on three given lengths, I thought this would be an easy intro to HTML canvas, I was wrong.

Here's where I have so far, but the sides aren't rendering properly:

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();

}

Any suggestions?

回答1:

Set Ax=0, Ay=0, set Bx=R3, By=0. Then the third point satisfies two circle equations

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

which given the chosen coordinates reduce to

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

and in the difference

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

which allows to compute Cx and from that Cy.

In code it looks like this:

    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>

回答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 a-b});
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>