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

Question

我正在尝试在画布上创建一个三角形。但我不确定哪一边是 x1, y1, x2, y2 ...等。我将我的三角形与website 上给出的三角形相匹配。但我看到了不同的结果。这是我的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

确定开始绘制三角形的点（在这种情况下第一个顶点在画布的中心）和第二个顶点的位置后，您需要计算等长两侧之间的角度.接下来可以计算第三个顶点的位置。

请阅读我代码中的 cmets。

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*abcos(C)

角度 C 与边 c 相对。

solving triangle

知道了这个就可以得到角度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>