1

var c = document.getElementById("c");
var ctx = c.getContext('2d');

for(var i=0;i<16; i++) {
  
  ctx.arc(50* i,50 * i,50,0,Math.PI * 2);
  ctx.stroke();
  
  
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas width="800" height="600" id="c"></canvas>
</body>
</html>

Lo que quiero lograr es dibujar 16 veces un arco en canvas mediante un ciclo for, pero no me lo dibuja.. Por qué?

3
  • Hace falta añadir el método stroke()
    – Dev. Joel
    el 18 jul. 2017 a las 20:53
  • Bien pero me dibuja solo 1
    – ESCM
    el 18 jul. 2017 a las 21:06
  • Dibuja sobre el mismo punto ,es necesario desplazar en x ,y para esto, podría emplear moveTo o aumentar los valores como se añadió en la respuesta de @asantana
    – Dev. Joel
    el 18 jul. 2017 a las 21:07

2 respuestas 2

1

Principalmente por dos cosas:

La primera es que no has marcado la linea, esto se hace con stroke().
Y segundo, porque en tu bucle aumentas la i, pero no hay ninguna variable en los parámetros del arc(). Si por ejemplo quisiera dibujar círculos en el eje x, podría ser algo así;

var c = document.getElementById("c");
var ctx = c.getContext('2d');

var x = 50
for(var i=0;i<16; i++) {
  
  ctx.beginPath();
  ctx.arc(x , 50,20,50,0,Math.PI*2);
  ctx.stroke();
  ctx.closePath();
  
  x+=20;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas width="800" height="600" id="c"></canvas>
</body>
</html>

También he puesto el beginPath() y el closePath() porque si no la línea no se levanta, es decir como si hicieras todos los círculos sin levantar un lápiz del papel. De esta manera en cada vuelta del bucle no empieza a dibujar donde terminó el bucle anterior.

3
  • Bien, pero no entendí lo del beginpath y closepath, por favor explicarmelo un poquito mas
    – ESCM
    el 18 jul. 2017 a las 21:08
  • vale, ya lo entendí y que pasa si nunca colocara el closepath? esque no veo diferencias si no lo coloco
    – ESCM
    el 18 jul. 2017 a las 21:09
  • Que aparte de los círculos, te va a dibujar una línea recta desde donde termina de hacer un círculo hasta donde empieza a hacer el siguiente.
    – asantana o
    el 18 jul. 2017 a las 21:10
0

Eso es porque CanvasRenderingContext2D.prototype.arc(x,y,radio, alpha, beta) agrega un arco al trazado, y tú no tienes un trazado

var canvas = document.createElement('canvas')
var contexto2D = canvas.getContext('2d')

contexto2D.fillStyle = "#000"
contexto2D.beginPath()
contexto2D.arc(150, 150, 150, Math.PI, 2 * Math.PI)
contexto2D.stroke()
contexto2D.closePath()

document.body.appendChild(canvas)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.