Как нарисовать треугольник по трём сторонам?

#javascript #canvas

У меня будет 3 интупа и баттон. При нажатии на этот батон должен нарисоваться треугольник
у которого 3 стороны равны значениям в инпутах. Как это организовать? Нагуглил 

context.beginPath();
            context.moveTo(30, 20);
            context.lineTo(some_value);
            context.lineTo(some_value);
            context.closePath();


Но этот способ подходит для рисования, по двум сторонам.
    

Ответы

Ответ 1

Вам надо найти координаты вершин и соединить их отрезками. Пусть одна сторона (например,
A) лежит вдоль оси 0X. Тогда её Y-координата будет равна 0. А значит и двух вершин
треугольника тоже. Остаётся найти ещё одну вершину и соединить её с концами этого отрезка A.

Я бы для начала нашёл углы треугольника. Это можно сделать из двух разных формул
поиска площади треугольника: по формуле Герона и зная, что площадь равна произведению
длин двух сторон на синус угла между ними.

После этого можно опустить высоту из вершины, координаты которой ищем, и внутри прямоугольного
треугольника легко найдём x- и y-компоненты координаты.



btn.onclick = () => {
    let A = 1 * a.value,
        B = 1 * b.value,
        C = 1 * c.value;
    let p = (A + B + C) / 2;
    let S = Math.sqrt(p * (p - A) * (p - B) * (p - C));
    let SinA = 2 * S / (A * B);
    let alpha = Math.asin(SinA);

    let x = B * Math.cos(alpha),
        y = B * Math.sin(alpha);

    let ctx = img.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(10 + A, 70);
    ctx.lineTo(10, 70);
    ctx.lineTo(10 + x, 70 - y);
    ctx.lineTo(10 + A, 70);
    ctx.stroke();
}













Матчасть: Как найти углы треугольника по трем его сторонам


Ответ 2

Вам нужно будет сначала вычислить координаты каждой точки. Вы можете установить первую
точку на [0, 0], а вторая будет на [x1, 0], где x1 - длина первой строки. Третью точку
можно рассчитать так: 



var AB = 40;
var BC = 50;
var AC = 30;

var A = [0, 0]; // начальные координаты
var B = [0, AB];
var C = [];

// вычисление третьей точки
C[1] = (AB * AB + AC * AC - BC * BC) / (2 * AB);
C[0] = Math.sqrt(AC * AC - C[1] * C[1]);

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(A[0], A[1]);
ctx.lineTo(B[0], B[1]);
ctx.lineTo(C[0], C[1]);
ctx.fill();