javascript - Why does canvas draw lines between circle (arc)? - Stack Overflow

admin管理员组

文章数量:1294651

In the moment canvas draw 15 circles with different speed and size which move from ltr. when one of them leaves the window it will be set to the start. The Problem is that canvas draw lines between the circles and i dont know why? Can anybody help?

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

In the moment canvas draw 15 circles with different speed and size which move from ltr. when one of them leaves the window it will be set to the start. The Problem is that canvas draw lines between the circles and i dont know why? Can anybody help?

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

• javascript
• html
• animation
• canvas

Share Improve this question Follow asked Dec 14, 2013 at 22:29 visionIncvisionInc 32555 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Change the code a little bit as beginPath() and stroke() are now only called once - what happens is that the arcs are accumulated in the loop and since they are not really circles - they have two open ends - these ends will be connected to each other creating lines between the arcs.

Try the following:

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

本文标签： javascriptWhy does canvas draw lines between circle (arc)Stack Overflow