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²

允许从Cx计算Cy。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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 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>

在HTML画布上绘制一个基于三个给定长度的三角形

2 个答案: