如何在 JavaScript 中以编程方式在画布上绘制三角形？

Question

我正在尝试在画布上创建一个三角形。但我不确定哪一边是 x1、y1、x2、y2 ... 等。我将我的三角形与该网站上给出的三角形相匹配。但我看到了不同的结果。这是我的JSFiddle

\n\n

这是我的代码：

\n\n

\r\n

\r\n

    var canvasElement = document.querySelector("#canvas");\r\n    var ctx = canvasElement.getContext("2d");\r\n\r\n    // Sides: a = 30 \xe2\x80\x83 b = 30 \xe2\x80\x83 c = 59\r\n\r\n    var triangle = {\r\n        x1: 30, \r\n        y1: 0, \r\n        x2: 0, \r\n        y2: 59, \r\n        x3: 30, \r\n        y3: 59 \r\n    }\r\n\r\n    ctx.strokeStyle = \'red\';\r\n    \r\n    ctx.beginPath();\r\n    ctx.moveTo(triangle.x1, triangle.y1);\r\n    ctx.lineTo(triangle.x2, triangle.y2);\r\n    ctx.lineTo(triangle.x3, triangle.y3);\r\n    ctx.lineTo(triangle.x1, triangle.y1);\r\n    ctx.closePath();\r\n    ctx.stroke();

\r\n

<canvas id="canvas" width="300" height="300"></canvas>\r\n    

\r\n

\r\n

\r\n

\n

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>

更新

OP 评论道：

如果三角形不是等腰怎么办？但等边。

这是一个更简单的情况，因为所有边和所有角度都相等。下一个演示是绘制一个等边三角形。

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与 side 相对c。

解三角形

知道了这一点，你就可以得到角度C：

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

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}

我希望它有帮助。