主页 / 问题 / 1396005
Accepted
Alexandr_TT
Asked:2022-09-01 22:11:36 +0000 UTC2022-09-01 22:11:36 +0000 UTC

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

  • 772

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

下面是我的代码：

 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>

问题的免费翻译如何在Javascript中以编程方式在画布上绘制三角形？来自 @Faiz。

javascript

1 个回答

  1. Best Answer

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

    请阅读我的代码中的注释。

    var canvasElement = document.querySelector("#canvas");
var ctx = canvasElement.getContext("2d");
// ширина canvas
let cw = (canvasElement.width = 150),
  cx = cw / 2;
  //высота canvas
let ch = (canvasElement.height = 150),
  cy = ch / 2;
  //your data
let a = 30,
  b = 30,
  c = 59;
  // В этом случае у вас есть равнобедренный треугольник, так как a = b = 30
  // этот треугольник описан в окружности с радиусом = 30
let R = 30;
// вычислить угол между двумя сторонами равной длины
let angle = Math.asin(.5 * 59 /  30);

//нарисуйте описанный круг:
ctx.beginPath();
ctx.arc(cx, cy, R, 0, 2 * Math.PI);
ctx.stroke();


var triangle = {
  //первая вершина находится в центре canvas
  //вы можете решить изменить это.
  x1: cx,
  y1: cy,
  //вторая вершина находится на описанной окружности на уровне 0 радиан, где R - радиус окружности ( a = 30, b=30 )
  //вы можете решить изменить это.
  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");
// ширина canvas
let cw = (canvasElement.width = 150),
  cx = cw / 2;
  //высота canvas
let ch = (canvasElement.height = 150),
  cy = ch / 2;
  //ваши данные

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 = {
  //первая вершина находится на описанной окружности в 0 радиан, где R - радиус окружности (R)
  //вы можете решить изменить это.
  x1: cx + R,
  y1: cy,
  //вторая вершина находится на описанной окружности в 2*Math.PI/3 радианах 
  //вы можете решить изменить это.
  x2: cx + R * Math.cos(2*Math.PI/3),
  y2: cy + R * Math.sin(2*Math.PI/3),
  //Рассчитайте положение третьей вершины
  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

    画一个所有边都不同的三角形。为此，我需要使用余弦定律

    c2 = a2 + b2 - 2*abcos(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;
  
// все стороны разные
let a = 45,
  b = 30,
  c = 59;

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

 var triangle = {
 //первая вершина находится в центре canvas
 //вы можешь изменить это.
        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>

    来自 @enxaneta的答案的松散翻译 。

    • 2

相关问题