How to draw triangle programmatically on canvas in Javascript? - Stack Overflow

admin管理员组

文章数量:1345164

I am trying to create a triangle on canvas. But I am not sure which side are x1, y1, x2, y2 ... etc. I am matching my triangle with the one given on this website . But I am seeing different results. Here is my JSFiddle

Here is my code:

    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>
    

I am trying to create a triangle on canvas. But I am not sure which side are x1, y1, x2, y2 ... etc. I am matching my triangle with the one given on this website . But I am seeing different results. Here is my JSFiddle

Here is my code:

    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
• canvas
• shapes

Share Improve this question Follow edited Feb 21, 2019 at 11:02 enxaneta 33.1k66 gold badges3232 silver badges4646 bronze badges asked Feb 21, 2019 at 10:36 FaizFaiz 4522 silver badges99 bronze badges 3

• What they are using on this website(triangle-calculator./…) is the length of the sides to draw a triangle. And you are using coordinates to draw a triangle. Convert your side lengths into coordinates and then draw. – RK_15 Commented Feb 21, 2019 at 10:49
• How do I do that? Convert side lengths into coordinates. Is there any formula for that? – Faiz Commented Feb 21, 2019 at 11:01
• That I dont know but I found one accepted answer at : stackoverflow./questions/41063695/… Check it out, May be this can help you – RK_15 Commented Feb 21, 2019 at 11:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

After deciding the point where to begin to draw your triangle ( the first vertex is in the center of the canvas in this case ) and the position of the second vertex, you need to calculate the angle between the two sides of equal length. Next you can calculate the position of the third vertex.

Please read the ments in my code.

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>

UPDATE

The OP is menting:

What if triangle is not isosceles? But Equilateral.

This is a simpler case since all sides and all angles are equal. The next demo is drawing an equilateral triangle.

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>

UPDATE 2

Drawing a triangle where all sides are different. For this I need to use the law of cosines.

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

Where the angle C is opposed to side c.

solving triangle

Knowing this you can get the angle 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>

I hope it helps.

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./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>

本文标签： How to draw triangle programmatically on canvas in JavascriptStack Overflow