javascript - 我如何自定义此 Canvas 的设计？

我开始制作动画，即时图像已经接近它的外观，但是正如您从我的代码片段中所看到的那样，“线条”很尖锐，并且看起来不像我下面发布的设计。谁能检查提供的代码和摘录中的外部代码，并帮助我弄清楚是什么控制着“线条”的设计，但我多次遍历整个代码却找不到答案。感谢所有帮助，谢谢。

这就是我希望动画中的“线条”看起来像的样子。

// Settings
var particleCount = 35,
flareCount = 0,
motion = 0.05,
tilt = 0,
particleSizeBase = 1,
particleSizeMultiplier = 0.5,
flareSizeBase = 100,
flareSizeMultiplier = 100,
glareAngle = -60,
glareOpacityMultiplier = 0.4,
renderParticles = true,
renderParticleGlare = true,
renderFlares = false,
renderLinks = false,
renderMesh = false,
flicker = false,
flickerSmoothing = 15, // higher = smoother flicker
blurSize = 0,
orbitTilt = true,
randomMotion = true,
noiseLength = 1000,
noiseStrength = 3;

document.querySelectorAll('.stars').forEach(canvas => {
  var context = canvas.getContext('2d'),
  color = canvas.dataset['color'],
  mouse = { x: 0, y: 0 },
  m = {},
  r = 0,
  c = 1000, // multiplier for delaunay points, since floats too small can mess up the algorithm
  n = 0,
  nAngle = (Math.PI * 2) / noiseLength,
  nRad = 100,
  nScale = 1,
  nPos = {x: 0, y: 0},
  points = [],
  vertices = [],
  triangles = [],
  links = [],
  particles = [],
  flares = [];

  function init() {
    var i, j, k;

    // requestAnimFrame polyfill
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      function( callback ){
        window.setTimeout(callback, 1000 / 60);
      };
    })();


    // Size canvas
    resize();

    mouse.x = canvas.clientWidth / 2;
    mouse.y = canvas.clientHeight / 2;

    // Create particle positions
    for (i = 0; i < particleCount; i++) {
      var p = new Particle();
      particles.push(p);
      points.push([p.x*c, p.y*c]);
    }


    vertices = Delaunay.triangulate(points);


    var tri = [];
    for (i = 0; i < vertices.length; i++) {
      if (tri.length == 2) {
        triangles.push(tri);
        tri = [];
      }
      tri.push(vertices[i]);
    }


    // Tell all the particles who their neighbors are
    for (i = 0; i < particles.length; i++) {
      // Loop through all tirangles
      for (j = 0; j < triangles.length; j++) {
        // Check if this particle's index is in this triangle
        k = triangles[j].indexOf(i);
        // If it is, add its neighbors to the particles contacts list
        if (k !== -1) {
          triangles[j].forEach(function(value, index, array) {
            if (value !== i && particles[i].neighbors.indexOf(value) == -1) {
              particles[i].neighbors.push(value);
            }
          });
        }
      }
    }

    var fps = 60;
    var now;
    var then = Date.now();
    var interval = 1000/fps;
    var delta;
    // Animation loop
    (function animloop(){
      requestAnimFrame(animloop);
      now = Date.now();
      delta = now - then;
      if (delta > interval) {


        then = now - (delta % interval);

        resize();
        render();
      }

    })();
  }

  function render() {
    if (randomMotion) {
      n++;
      if (n >= noiseLength) {
        n = 0;
      }

      nPos = noisePoint(n);

    }



    if (renderParticles) {
      // Render particles
      for (var i = 0; i < particleCount; i++) {
        particles[i].render();
      }
    }


  }

  function resize() {

    canvas.width = window.innerWidth * (window.devicePixelRatio || 1);
    canvas.height = canvas.width * (canvas.clientHeight / canvas.clientWidth);

  }



  // Particle class
  var Particle = function() {
    this.x = random(-0.1, 1.1, true);
    this.y = random(-0.1, 1.1, true);
    this.z = random(0,4);
    this.color = color;
    this.opacity = random(0.1,1,true);
    this.flicker = 0;
    this.neighbors = []; // placeholder for neighbors
  };
  Particle.prototype.render = function() {
    var pos = position(this.x, this.y, this.z),
    r = ((this.z * particleSizeMultiplier) + particleSizeBase) * (sizeRatio() / 1000),
    o = this.opacity;



    context.fillStyle = this.color;
    context.globalAlpha = o;
    context.beginPath();

    context.fill();
    context.closePath();

    if (renderParticleGlare) {
      context.globalAlpha = o * glareOpacityMultiplier;

      context.ellipse(pos.x, pos.y, r * 100, r, (glareAngle - ((nPos.x - 0.5) * noiseStrength * motion)) * (Math.PI / 180), 0, 2 * Math.PI, false);
      context.fill();
      context.closePath();
    }

    context.globalAlpha = 1;
  };

  // Utils

  function noisePoint(i) {
    var a = nAngle * i,
    cosA = Math.cos(a),
    sinA = Math.sin(a),


    rad = nRad;
    return {
      x: rad * cosA,
      y: rad * sinA
    };
  }

  function position(x, y, z) {
    return {
      x: (x * canvas.width) + ((((canvas.width / 2) - mouse.x + ((nPos.x - 0.5) * noiseStrength)) * z) * motion),
      y: (y * canvas.height) + ((((canvas.height / 2) - mouse.y + ((nPos.y - 0.5) * noiseStrength)) * z) * motion)
    };
  }

  function sizeRatio() {
    return canvas.width >= canvas.height ? canvas.width : canvas.height;
  }

  function random(min, max, float) {
    return float ?
    Math.random() * (max - min) + min :
    Math.floor(Math.random() * (max - min + 1)) + min;
  }


  // init
  if (canvas) init();
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: #000;
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.00) 0%, #000000 100%);
  height: 100%;
}

#stars {
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 1;
  position: absolute;
}

<script src="https://rawgit.com/ironwallaby/delaunay/master/delaunay.js"></script>
<script src="http://requirejs.org/docs/release/2.1.15/minified/require.js"></script>

<canvas id="Stars" class="stars" width="300" height="300" data-color="#fff"></canvas>

最佳答案

这些是什么线？

在代码中，您将找到一个Particle.prototype.render方法。这用于绘制点（星形）及其眩光效果。眩光效果与您看到的线条相对应，它们是使用ellipse制成的：

context.ellipse(pos.x, pos.y, r * 100, r, (glareAngle - ((nPos.x - 0.5) * noiseStrength * motion)) * (Math.PI / 180), 0, 2 * Math.PI, false);

如何获得这个偏斜的矩形效果呢？

为了获得想要的效果，您需要使用fillRect将这个椭圆替换为矩形：

context.fillRect(pos.x, pos.y, r * noiseStrength, r * 100);

但这还不够。我们的矩形笔直向下移动，它们不遵循眩光角，因此我们需要使其倾斜。这可以使用setTransform方法实现：

context.setTransform(1, 0, (glareAngle/100), 1, 0, 0);

剩下的代码如下：

Particle.prototype.render = function() {
  /* ... */

  if (renderParticleGlare) {
    context.globalAlpha = o * glareOpacityMultiplier;
    // Set the transformation before drawing the glare
    context.setTransform(1, 0, (glareAngle/100), 1, 0, 0);
    // Draw the glare
    context.fillRect(pos.x, pos.y, r * noiseStrength, r * 100);
    context.closePath();
  }

  context.globalAlpha = 1;
};

演示版

// Settings
var particleCount = 35,
flareCount = 0,
motion = 0.05,
tilt = 0,
particleSizeBase = 1,
particleSizeMultiplier = 0.5,
flareSizeBase = 100,
flareSizeMultiplier = 100,
glareAngle = -60,
glareOpacityMultiplier = 0.4,
renderParticles = true,
renderParticleGlare = true,
renderFlares = false,
renderLinks = false,
renderMesh = false,
flicker = false,
flickerSmoothing = 15, // higher = smoother flicker
blurSize = 0,
orbitTilt = true,
randomMotion = true,
noiseLength = 1000,
noiseStrength = 8;

document.querySelectorAll('.stars').forEach(canvas => {
  var context = canvas.getContext('2d'),
  color = canvas.dataset['color'],
  mouse = { x: 0, y: 0 },
  m = {},
  r = 0,
  c = 1000, // multiplier for delaunay points, since floats too small can mess up the algorithm
  n = 0,
  nAngle = (Math.PI * 2) / noiseLength,
  nRad = 100,
  nScale = 1,
  nPos = {x: 0, y: 0},
  points = [],
  vertices = [],
  triangles = [],
  links = [],
  particles = [],
  flares = [];

  function init() {
    var i, j, k;

    // requestAnimFrame polyfill
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      function( callback ){
        window.setTimeout(callback, 1000 / 60);
      };
    })();


    // Size canvas
    resize();

    mouse.x = canvas.clientWidth / 2;
    mouse.y = canvas.clientHeight / 2;

    // Create particle positions
    for (i = 0; i < particleCount; i++) {
      var p = new Particle();
      particles.push(p);
      points.push([p.x*c, p.y*c]);
    }


    vertices = Delaunay.triangulate(points);


    var tri = [];
    for (i = 0; i < vertices.length; i++) {
      if (tri.length == 2) {
        triangles.push(tri);
        tri = [];
      }
      tri.push(vertices[i]);
    }


    // Tell all the particles who their neighbors are
    for (i = 0; i < particles.length; i++) {
      // Loop through all tirangles
      for (j = 0; j < triangles.length; j++) {
        // Check if this particle's index is in this triangle
        k = triangles[j].indexOf(i);
        // If it is, add its neighbors to the particles contacts list
        if (k !== -1) {
          triangles[j].forEach(function(value, index, array) {
            if (value !== i && particles[i].neighbors.indexOf(value) == -1) {
              particles[i].neighbors.push(value);
            }
          });
        }
      }
    }

    var fps = 60;
    var now;
    var then = Date.now();
    var interval = 1000/fps;
    var delta;
    // Animation loop
    (function animloop(){
      requestAnimFrame(animloop);
      now = Date.now();
      delta = now - then;
      if (delta > interval) {


        then = now - (delta % interval);

        resize();
        render();
      }

    })();
  }

  function render() {
    if (randomMotion) {
      n++;
      if (n >= noiseLength) {
        n = 0;
      }

      nPos = noisePoint(n);

    }



    if (renderParticles) {
      // Render particles
      for (var i = 0; i < particleCount; i++) {
        particles[i].render();
      }
    }


  }

  function resize() {

    canvas.width = window.innerWidth * (window.devicePixelRatio || 1);
    canvas.height = canvas.width * (canvas.clientHeight / canvas.clientWidth);

  }



  // Particle class
  var Particle = function() {
    this.x = random(-0.1, 1.1, true);
    this.y = random(-0.1, 1.1, true);
    this.z = random(0,4);
    this.color = color;
    this.opacity = random(0.1,1,true);
    this.flicker = 0;
    this.neighbors = []; // placeholder for neighbors
  };
  Particle.prototype.render = function() {
    var pos = position(this.x, this.y, this.z),
    r = ((this.z * particleSizeMultiplier) + particleSizeBase) * (sizeRatio() / 1000),
    o = this.opacity;



    context.fillStyle = this.color;
    context.globalAlpha = o;
    context.beginPath();

    context.fill();
    context.closePath();

    if (renderParticleGlare) {
      context.globalAlpha = o * glareOpacityMultiplier;
      // Set the transformation before drawing the glare
      context.setTransform(1, 0, (glareAngle/100), 1, 0, 0);
      // Draw the glare
      context.fillRect(pos.x, pos.y, r * noiseStrength, r * 100);
      context.closePath();
    }

    context.globalAlpha = 1;
  };

  // Utils

  function noisePoint(i) {
    var a = nAngle * i,
    cosA = Math.cos(a),
    sinA = Math.sin(a),


    rad = nRad;
    return {
      x: rad * cosA,
      y: rad * sinA
    };
  }

  function position(x, y, z) {
    return {
      x: (x * canvas.width) + ((((canvas.width / 2) - mouse.x + ((nPos.x - 0.5) * noiseStrength)) * z) * motion),
      y: (y * canvas.height) + ((((canvas.height / 2) - mouse.y + ((nPos.y - 0.5) * noiseStrength)) * z) * motion)
    };
  }

  function sizeRatio() {
    return canvas.width >= canvas.height ? canvas.width : canvas.height;
  }

  function random(min, max, float) {
    return float ?
    Math.random() * (max - min) + min :
    Math.floor(Math.random() * (max - min + 1)) + min;
  }


  // init
  if (canvas) init();
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: #000;
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.00) 0%, #000000 100%);
  height: 100%;
}

#stars {
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 1;
  position: absolute;
}

<script src="https://rawgit.com/ironwallaby/delaunay/master/delaunay.js"></script>
<script src="http://requirejs.org/docs/release/2.1.15/minified/require.js"></script>

<canvas id="Stars" class="stars" width="300" height="300" data-color="#fff"></canvas>

关于javascript - 我如何自定义此 Canvas 的设计？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49846304/