Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

444
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda