帆布火花线

Question

我想创建各种长度的火花线，并通过将其从画布的中心移动到末端来对其进行动画处理，并且该过程必须在画布上循环。为此，我从粒子系统入手。

请检查以下代码，这是代码笔链接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()方法来创建相同的效果？我尝试使用以下代码（在代码笔中已注释）

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

先谢谢了。

Answer 1

这是一种方法...
使用线条，您将获得更连续的效果：

我对您的代码所做的更改是为了跟踪起点和终点。

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;

  var lines = {},
    lineIndex = 0;

  function Line() {
    this.start = { x: centerX, y: centerY };
    this.end = { x: centerX, 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.end.x += this.vx;
    this.end.y += this.vy;
    this.life++;
    if (this.life >= this.maxLife) {
      delete lines[this.id];
    }
    //context.fillStyle = "#000";
    //context.fillRect(this.x, this.y, 1, 1)
    context.beginPath();
    context.moveTo(this.start.x, this.start.y);
    context.lineTo(this.end.x, this.end.y);
    context.lineWidth = 1;
    context.stroke();
    context.strokeStyle = "#000";
  }

  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>