Quiero hacer una línea circular pero hace un campo negro. ¿Qué me estoy perdiendo?

Aquí está mi jsfiddle: http://jsfiddle.net/j6y5f7xb/1/

Mi código:

var x = 0;

var maxLoops = 800;
var counter = 0;

function loop(){
    if (counter++ >= maxLoops) return;

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

    ctx.clearRect(0, 0, 800, 500);

    ctx.moveTo(400,250);
    ctx.lineTo(x,100);
    ctx.stroke();

    x++;

    setTimeout(function(){
        console.log(counter);
        loop();
    }, 10);
}
loop();
4
M. Schuurman 11 dic. 2015 a las 13:37

3 respuestas

La mejor respuesta

Intenta agregarlo así
ctx.beginPath ();
ctx.moveTo (400,250); ctx.lineTo (x, 100); ctx.stroke ();

2
lars kamps 14 dic. 2015 a las 14:41

Intente agregar esta línea debajo de ctx.lineTo ().

  context.fillStyle = 'black';
  context.fill();

Para obtener más información, puede consultar este sitio: http://www.html5canvastutorials.com/ tutoriales / html5-canvas-circles /

1
I am L 11 dic. 2015 a las 10:43

¿Una línea 'circular' como this?

No puede hacer un círculo si su coordenada y es constante 100

1
EekTheCat 11 dic. 2015 a las 10:55