在画布中使用形状制作动画线条

Question

我将在这里尝试清楚，在这个starfeild动画中，我想要添加的是当圆圈来自一对时，每个应该通过一条线连接到彼此，并且当向前和向前移动时，线将会扩展并且此时将消失圆圈移出画布anyhelp将不胜感激

function randomRange(minVal, maxVal) {
  return Math.floor(Math.random() * (maxVal - minVal - 1)) + minVal;
}

function initStars() {
  for (var i = 0; i < stars.length; i++) {
    stars[i] = {
      x: randomRange(-25, 25),
      y: randomRange(-25, 25),
      z: randomRange(1, MAX_DEPTH)
    }
  }
}

function degToRad(deg) {
  radians = (deg * Math.PI / 180) - Math.PI / 2;
  return radians;

}

function animate() {
  var halfWidth = canvas.width / 2;
  var halfHeight = canvas.height / 2;

  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < stars.length; i++) {
    stars[i].z -= 0.2;

    if (stars[i].z <= 0) {
      stars[i].x = randomRange(-25, 25);
      stars[i].y = randomRange(-25, 25);
      stars[i].z = MAX_DEPTH;
    }

    var k = 128.0 / stars[i].z;
    var px = stars[i].x * k + halfWidth;
    var py = stars[i].y * k + halfHeight;

    if (px >= 0 && px <= 1500 && py >= 0 && py <= 1500) {
      var size = (1 - stars[i].z / 32.0) * 5;
      var shade = parseInt((1 - stars[i].z / 32.0) * 750);
      ctx.fillStyle = "rgb(" + shade + "," + shade + "," + shade + ")";
      ctx.beginPath();
      ctx.arc(px, py, size, degToRad(0), degToRad(360));
      ctx.fill();
    }
  }
}

function animate() {
  var halfWidth = canvas.width / 2;
  var halfHeight = canvas.height / 2;

  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < stars.length; i++) {
    stars[i].z -= 0.2;

    if (stars[i].z <= 0) {
      stars[i].x = randomRange(-25, 25);
      stars[i].y = randomRange(-25, 25);
      stars[i].z = MAX_DEPTH;
    }

    var k = 128.0 / stars[i].z;
    var px = stars[i].x * k + halfWidth;
    var py = stars[i].y * k + halfHeight;

    if (px >= 0 && px <= 1500 && py >= 0 && py <= 1500) {
      var size = (1 - stars[i].z / 32.0) * 5;
      var shade = parseInt((1 - stars[i].z / 32.0) * 750);
      ctx.fillStyle = "rgb(" + shade + "," + shade + "," + shade + ")";
      ctx.beginPath();
      ctx.arc(px, py, size, degToRad(0), degToRad(360));
      ctx.fill();
    }
  }
}

<!DOCTYPE html5>
<html>

<head>
  <title>stars</title>

  <script src="convergis.js"></script>
  <script>
    MAX_DEPTH = 32;

    var canvas, ctx;
    var stars = new Array(500);

    window.onload = function() {
      canvas = document.getElementById("tutorial");
      if (canvas && canvas.getContext) {
        ctx = canvas.getContext("2d");
        initStars();
        setInterval(animate, 17);
      }
    }
  </script>
</head>

<body>
  <canvas id='tutorial' width='1500' height='1500'>
  
  </canvas>
</body>

</html>