帆布火花线

Question

我想创建一个具有各种长度的火花线，并通过从画布的中心移动到画布的末端来动画它们，并且该过程必须在画布上循环。为了达到这个目的，我开始使用粒子系统。

请检查以下代码，这里是codepen链接https://codepen.io/yesvin/pen/XPKNYW

window.onload = function() {
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,
    centerX = w / 2,
    centerY = h / 2,
    speed = 0,
    time = 0,
    numObjects = 5,
    x, y, vx, vy, life, maxLife;

  var lines = {},
    lineIndex = 0;

  function Line() {
    this.x = centerX;
    this.y = centerY;
    this.vx = Math.random() * 16 - 8;
    this.vy = Math.random() * 16 - 8;
    this.life = 0;
    this.maxLife = Math.random() * 10 + 20;
    lineIndex++;
    lines[lineIndex] = this;
    this.id = lineIndex;
  }

  Line.prototype.draw = function() {
    this.x += this.vx;
    this.y += this.vy;
    this.life++;
    if (this.life >= this.maxLife) {
      delete lines[this.id];
    }
    context.fillStyle = "#000";
    context.fillRect(this.x, this.y, 3, 3)
  }

  setInterval(function() {
    context.fillStyle = 'rgba(255,255,255,.05)';
    context.fillRect(0, 0, w, h);
    new Line();
    for (var i in lines) {
      lines[i].draw();
    }
  }, 30)
};

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

<canvas id="canvas"></canvas>

那么，我们如何使用lineTo()和moveTo()方法创建相同的效果？我尝试使用以下代码（在codepen中注释）

context.beginPath();
context.moveTo(centerX, centerY);     
context.lineTo(this.x * Math.random() * w, this.y * Math.random() * h);
context.lineWidth = 1;
context.stroke();
context.strokeStyle = "#000";

样品GIF

提前致谢。