javascript - Canvas Spark 线

Question

我想创建一条不同长度的迷你图，并通过将它们从 Canvas 的中心移动到 Canvas 的末端来制作动画，并且该过程必须在 Canvas 上循环。为了实现这一点，我从粒子系统开始。

请检查下面的代码，这是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

提前致谢。

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>