Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

451
Visualizações
How can I draw lines around a circle

lines around a circle

how can I draw lines around a circle using HTMLcanvas? I am more interested on the math.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

You need to compute the point on the circle and then the point that lies outside of the circle. Then use beginPath, moveTo, lineTo and finally stroke to draw the line.

To compute a point at distance d from a point of coords (x, y) and angle an you can use the following formula:

(x + Math.cos(an) * d, y + Math.sin(an) * d)

Now you compute 2 points, one using d as the radius of the circle, and then d as something bigger than radius, depending on your needs.

I'm assuming that the an is in radians, if it's measured in degrees then you can convert it like this:

const rad = an / 180 * Math.PI

about 4 years ago · Juan Pablo Isaza Relatório

0

I've cobbled this quickly together:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

//draw a circle
ctx.fillStyle = '#4A8';
ctx.beginPath();
ctx.arc(250, 250, 50, 0, 6.282);
ctx.fill();

//draw 12 lines
for(let i = 1; i <= 12; i++) {
    let a = 360 / 12 * i
  drawLine(a)
}


function drawLine(angle) {
  /*
  parametric form from wikipedia:
  https://en.wikipedia.org/wiki/Circle#Equations

  x,y are origin, r is radius a is angle
  x = cx + r * cos(a)
  y = cy + r * sin(a)
  */
  
  ctx.beginPath();
  ctx.lineWidth = 2;
  //thanks Radu!
  const rad = angle / 180 * Math.PI

  //250 is the center of the circly both for x & y
  //starting point on the circumfence of the circle
  let x0 = 250 + 50 * Math.cos(rad)
  let y0 = 250 + 50 * Math.sin(rad)
  //endpoint of the stroke further outside with a length of 100
  let x1 = 250 + 100 * Math.cos(rad)
  let y1 = 250 + 100 * Math.sin(rad)
  
  //draw from x0 to x1
  ctx.moveTo(x0, y0);
  ctx.lineTo(x1,y1);
  ctx.strokeStyle = '#ff0000';
  ctx.stroke(); 
}

https://jsfiddle.net/rokt0v51/

Result:

enter image description here

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda