javascript - 为什么 Canvas 在圆(弧)之间画线？

Question

此刻 Canvas 以不同的速度和大小绘制 15 个从 ltr 移动的圆圈。当其中一个离开窗口时，它将被设置为开始。问题是 Canvas 在圆圈之间画线，我不知道为什么？有人可以帮忙吗？

window.onload = function () {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var W = canvas.width = window.innerWidth;
    var H = canvas.height = window.innerHeight;
    var mp = 15; //max particles
    var particles = [];
    //var rotate = 180;

    reqAnimFrame = window.requestAnimationFrame ||
                   window.mozRequestAnimationFrame    ||
                   window.webkitRequestAnimationFrame ||
                   window.msRequestAnimationFrame     ||
                   window.oRequestAnimationFrame;

    for ( var i = 0; i < mp; i++ )
        {
            particles.push({
                x: Math.floor(Math.random()*W), //x-coordinate
                y: Math.floor(Math.random()*H), //y-coordinate
                d: Math.floor(Math.random()*(mp - 1) + 1), //density
                r: Math.floor(Math.random()*(70 - 10) + 10) //radius
            })
        }



    function animate() {
        reqAnimFrame(animate);
        for ( var i = 0; i < mp; i++ )
            {
                var p = particles[i];
                p.x += p.d;


                if(p.x >= W){
                    p.x = -300;
                    p.y = Math.floor(Math.random()*H);
                }
                draw();
            }
    }

    function draw() {
        ctx.clearRect(0, 0, W, H);
        ctx.fillStyle = "rgba(0,204,142,1";
        ctx.beginPath();
        for ( var i = 0; i < mp; i++ )
            {
                var p = particles[i];
                ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, false);
                //ctx.moveTo(p.x,p.y);
                //ctx.lineTo(p.x + 150, p.y + (-180));
                //ctx.lineTo(p.x + 300, p.y);
            }
        ctx.stroke();
    }
    animate();
    };//onload function

Answer 1

稍微更改一下代码，因为 beginPath() 和 stroke() 现在只调用一次 - 发生的情况是弧在循环中累积，因为它们并不是真正的圆圈 - 它们有两个开放的端点 - 这些端点将相互连接，在圆弧之间形成线。

尝试以下操作:

function draw() {
    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = "rgba(0,204,142,1";
    for ( var i = 0; i < mp; i++ ) {
        var p = particles[i];
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, false);
        ctx.stroke();
    }
}