PIXI.JS - Graphics.drawCircle（）+动画似乎有一些问题

Question

所以我决定今天开始玩Pixi.js，一切都很好，我想要画出780多个圈子。

<script>
    var stage = new PIXI.Stage(0xffffff);
        var container = new PIXI.DisplayObjectContainer();
    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, {antialias: true});

    document.body.appendChild(renderer.view);

    requestAnimFrame(animate);

    stage.addChild(container);

        var graphics = new PIXI.Graphics();
        graphics.lineStyle(1, 0x000000);
        graphics.alpha = 0.05;

        var circleCountCurrent = 0;
        var circleCountMax = 1000; //781;

        var angle = 0;
        var anglSpeed = 0.025;

        var centerY = window.innerHeight / 2;
        var circleSize = 10;

        var xPos = 100;
        var xSpeed = 0.5;
        var amplitude = 20;

        container.addChild(graphics);


    function animate() 
        {
         requestAnimFrame(animate);

              var yPos; 

              if(circleCountCurrent < circleCountMax)
              {
                    yPos = centerY + Math.sin(angle) * amplitude;
                    drawCircle(xPos, yPos, circleSize);

                    angle += anglSpeed;
                    xPos += xSpeed;

                    circleCountCurrent++;

                    //console.log('xPos: ' + xPos);
              }

         renderer.render(stage);
    }

        function drawCircle(x, y, r)
        {
              graphics.drawCircle(x, y, r);
        }
</script>

这是我的代码（不，它不是超级优雅......）而且我正在试图找出问题所在。我只是希望波在屏幕上继续，而不是在780+次迭代之后从最初的xPos开始：

注意从波形末尾回到开头的线条。它出现在780次迭代之后

如果这有帮助，我正在使用pixi.js v2.2.8。

非常感谢任何意见。

祝你有美好的一天！

/André