JavaScript 循环线

Question

我想做一个圆圈线，但它变成了一个黑色区域。我错过了什么？

这是我的 jsfiddle：http://jsfiddle.net/j6y5f7xb/1/

我的代码：

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();

Answer 1

尝试在 ctx.lineTo() 下添加这一行。

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

更多信息，您可以查看此站点：http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

Answer 2

像 this?

这样的 'circling' 行

如果你的y坐标不变，你就不能画圆100

Answer 3

尝试这样添加
ctx.beginPath();
ctx.moveTo(400,250); ctx.lineTo(x,100); ctx.stroke();

JavaScript 循环线

JavaScript circling line

html

javascript

line