Javascript 在画布中使用形状设置线条动画

在这部starfeild动画中，我想补充的是，当圆产生一对时，每一对都应该通过一条线相互连接，随着向前移动和分开，线将扩大，当圆移出画布时，线将消失 任何帮助都将不胜感激

函数randomRangeminVal，maxVal{ 返回Math.floorMath.random*maxVal-minVal-1+minVal； } 函数初始化{ 对于变量i=0；i如果stars[i].z=0&&px=0&&py你是指这样的smth吗

var MAX_DEPTH = 32;
var canvas, ctx;
var stars = new Array(500);

canvas = document.getElementById("tutorial");

if (canvas && canvas.getContext) {
  ctx = canvas.getContext("2d");
  initStars();
  setInterval(animate, 17);
}

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 - 1; i += 1) {
    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;
    var nextPx = stars[i + 1].x * k + halfWidth;
    var nextPy = stars[i + 1].x * k + halfWidth;

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

      if (px > 0 && px < canvas.width &&
            py > 0 && py < canvas.height &&
          nextPx > 0 && nextPx < canvas.width &&
          nextPy > 0 && nextPy < canvas.height) {
        ctx.beginPath();
        ctx.moveTo(px, py);
        ctx.lineTo(nextPx, nextPy);
        ctx.strokeStyle = '#ff0000';
        ctx.stroke();
      }
    }
  }
}