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

Question

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

3

我正在尝试在画布上创建一个三角形，但我不确定哪个边是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>

- Faiz

他们在这个网站上(https://www.triangle-calculator.com/?what=sss&a=30&b=30&c=59&submit=Solve)使用三角形的边长来绘制。而您正在使用坐标来绘制三角形。将您的边长转换为坐标，然后进行绘制。 - RK_15

我该怎么做？将边长转换为坐标。有没有公式可以用？ - Faiz

我不知道，但我在以下链接中找到了一个被接受的答案：https://stackoverflow.com/questions/41063695/draw-a-triangle-in-html-canvas-based-on-three-given-lenths 看看吧，也许这可以帮助你。 - RK_15

2个回答

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>

- Aishwarya

这对你有帮助吗？ - Aishwarya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- enxaneta · Accepted Answer

在确定三角形绘制的起点(在这种情况下，第一个顶点位于画布中心)和第二个顶点的位置后，您需要计算两条等长边之间的夹角。接下来，您可以计算第三个定点的位置。

请阅读我的代码注释。

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

希望这有所帮助。