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

Question

Я пытаюсь создать треугольник на холсте.Но я не уверен, с какой стороны x1, y1, x2, y2 ... и т. Д. Я сопоставляю свой треугольник с треугольником, указанным на этом сайте .Но я вижу разные результаты.Вот мой JSFiddle

Вот мой код:

    var canvasElement = document.querySelector("#canvas");
    var ctx = canvasElement.getContext("2d");

    // Sides: a = 30   b = 30   c = 59

    var triangle = {
        x1: 30, 
        y1: 0, 
        x2: 0, 
        y2: 59, 
        x3: 30, 
        y3: 59 
    }

    ctx.strokeStyle = 'red';
    
    ctx.beginPath();
    ctx.moveTo(triangle.x1, triangle.y1);
    ctx.lineTo(triangle.x2, triangle.y2);
    ctx.lineTo(triangle.x3, triangle.y3);
    ctx.lineTo(triangle.x1, triangle.y1);
    ctx.closePath();
    ctx.stroke();

<canvas id="canvas" width="300" height="300"></canvas>
    

Answer 1

После определения точки, с которой нужно начать рисовать свой треугольник (в этом случае первая вершина находится в центре холста) и положение второй вершины, вам нужно вычислить угол между двумя сторонами равной длины.,Далее вы можете рассчитать положение третьей вершины.

Пожалуйста, прочитайте комментарии в моем коде.

var canvasElement = document.querySelector("#canvas");
var ctx = canvasElement.getContext("2d");
// the width of the canvas
let cw = (canvasElement.width = 150),
  cx = cw / 2;
  //the height of the canvas
let ch = (canvasElement.height = 150),
  cy = ch / 2;
  //your data
let a = 30,
  b = 30,
  c = 59;
  // In this case you have an isosceles triangle since a = b = 30
  // this triangle is circumscribed in a circle with a radius = 30
let R = 30;
// calculate the angle between the two sides of equal length
let angle = Math.asin(.5 * 59 /  30);

//draw the circumscribed circle:
ctx.beginPath();
ctx.arc(cx, cy, R, 0, 2 * Math.PI);
ctx.stroke();


var triangle = {
  //the first vertex is in the center of the canvas
  //you may decide to change this.
  x1: cx,
  y1: cy,
  //the second vertex is on the circumscribed circle at 0 radians where R is the radius of the circle ( a = 30, b=30 )
  //you may decide to change this.
  x2: cx + R,
  y2: cy,
  //calculate the 3-rd vertex
  x3: cx + R * Math.cos(angle),
  y3: cy + R * Math.sin(angle)
};

ctx.strokeStyle = "red";

ctx.beginPath();
ctx.moveTo(triangle.x1, triangle.y1);
ctx.lineTo(triangle.x2, triangle.y2);
ctx.lineTo(triangle.x3, triangle.y3);
ctx.lineTo(triangle.x1, triangle.y1);
ctx.closePath();
ctx.stroke();

canvas{border:1px solid}

<canvas id="canvas" ></canvas>

ОБНОВЛЕНИЕ

ОП комментирует:

Что если треугольник не равнобедренный?Но равносторонний.

Это более простой случай, поскольку все стороны и все углы равны.Следующая демонстрация рисует равносторонний треугольник.

var canvasElement = document.querySelector("#canvas");
var ctx = canvasElement.getContext("2d");
// the width of the canvas
let cw = (canvasElement.width = 150),
  cx = cw / 2;
  //the height of the canvas
let ch = (canvasElement.height = 150),
  cy = ch / 2;
  //your data

let L = 60
let a = L,
  b = L,
  c = L;

let R = (L *.5) / Math.cos(Math.PI/6);



//draw the circumscribed circle:
ctx.beginPath();
ctx.arc(cx, cy, R, 0, 2 * Math.PI);
ctx.stroke();


var triangle = {
  //the first vertex is on the circumscribed circle at 0 radians where R is the radius of the circle ( R)
  //you may decide to change this.
  x1: cx + R,
  y1: cy,
  //the second vertex is on the circumscribed circle at 2*Math.PI/3 radians 
  //you may decide to change this.
  x2: cx + R * Math.cos(2*Math.PI/3),
  y2: cy + R * Math.sin(2*Math.PI/3),
  //calculate the 3-rd vertex
  x3: cx + R * Math.cos(4*Math.PI/3),
  y3: cy + R * Math.sin(4*Math.PI/3)
};

ctx.strokeStyle = "red";

ctx.beginPath();
ctx.moveTo(triangle.x1, triangle.y1);
ctx.lineTo(triangle.x2, triangle.y2);
ctx.lineTo(triangle.x3, triangle.y3);
ctx.lineTo(triangle.x1, triangle.y1);
ctx.closePath();
ctx.stroke();

canvas{border:1px solid}

<canvas id="canvas" ></canvas>

ОБНОВЛЕНИЕ 2

Рисование треугольника, где все стороны разные.Для этого мне нужно использовать закон косинусов.

c ² = a ² + b ² - 2 * a b cos (C)

Где угол C противоположен стороне c.

решающий треугольник

Зная это, вы можете получить угол C:

let angleC = Math.acos((c*c - a*a - b*b) / (2*a*b) );

var canvasElement = document.querySelector("#canvas");
var ctx = canvasElement.getContext("2d");
let cw = (canvasElement.width = 150),
  cx = cw / 2;
let ch = (canvasElement.height = 150),
  cy = ch / 2;
  
// all sides are different
let a = 45,
  b = 30,
  c = 59;

let angleC = Math.acos((c*c - a*a - b*b) / (2*a*b) );

 var triangle = {
 //the first vertex is in the center of the canvas
 //you can change this.
        x1: cx, 
        y1: cy, 
 // the second vertex 
        x2: cx + a, 
        y2: cy, 
 // the 3-rd vertex       
        x3: cx + b*Math.cos(angleC), 
        y3: cy + b*Math.sin(angleC),
    }



ctx.strokeStyle = "red";

ctx.beginPath();
ctx.moveTo(triangle.x1, triangle.y1);
ctx.lineTo(triangle.x2, triangle.y2);
ctx.lineTo(triangle.x3, triangle.y3);
ctx.lineTo(triangle.x1, triangle.y1);
ctx.closePath();
ctx.stroke();

canvas{border:1px solid}

<canvas id="canvas" ></canvas>

Надеюсь, это поможет.

Answer 2

var canvasElement = document.querySelector("#canvas");
var ctx = canvasElement.getContext("2d");

// Sides: a = 30   b = 30   c = 59

var triangle = {
    x1: 30, 
    y1: 0, 
    x2: 0, 
    y2: 59, 
    x3: 30, 
    y3: 59 
}

ctx.strokeStyle = 'red';

ctx.beginPath();
ctx.moveTo(triangle.x1, triangle.y1);
ctx.lineTo(triangle.x2, triangle.y2);
ctx.lineTo(triangle.y2, triangle.y2);
ctx.closePath();
ctx.stroke();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>

// JavaScript for drawing on canvas
// applying colors + three triangles

function draw() {
  // canvas with id="myCanvas"
  var canvas = document.getElementById('myCanvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.strokeStyle = "#00F";
    ctx.moveTo(400, 0);
    ctx.lineTo(300, 200); // draw straight down by 200px (200 + 200)
    ctx.lineTo(500, 200); // draw up toward left (100 less than 300, so left)
    ctx.closePath(); // connect end to start
    ctx.stroke(); // outline the shape that's been described

  }
}

draw();

<canvas id="myCanvas" width="700" height="410">
  <p>Some default content can appear here.</p>
</canvas>
<p>Triangles!</p>