ctx alternativ. Verwenden Sie StrokeStyle, wenn Sie requestAnimationFrame() verwenden.

Question

Ich versuche, einfache Zufallsbewegungen als Hintergrundfläche für meine Zielseite zu zeichnen, und es fällt mir schwer, den Linien eine eindeutige Farbe zu verleihen.

Ich habe auch versucht, es nach dem Film zu ändern, ohne Erfolg (sieht einfach nach gemischten Farben aus).

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
//ctx.canvas.width = window.innerWidth;
//ctx.canvas.height = window.innerHeight*4;

const numSteps = ctx.canvas.width / 2 + 10;
const stepSize = 10;
const startX = 0;
const startY = canvas.height / 2;
const timeInterval = 15;

var Point = function(color_inp){
  this.x = startX;
  this.y = startY;
  this.color = color_inp;
}

const farben = [
  '#FF1493', // Rosa
  '#FF00FF', // Magenta
  '#800080', // Lila
  '#4B0082', // Indigo
  '#0000FF', // Blau
  '#00FFFF', // Cyan
  '#00FF00', // Grün
  '#FFFF00', // Gelb
  '#FF7F00', // Orange
  '#8B4513' // Sattelbraun
];



Funktion drawRandomWalk(stPoint, Schritte) {
  ctx.globalAlpha = 0,01;
  sei stepCount = 0;
  ctx.beginPath();
  ctx.StrokeStyle = stPoint.color;
  ctx.moveTo(stPoint.x, stPoint.y);
  setTimeout(drawStep, 10);
  
  Funktion drawStep() {
    if (stepCount >= Schritte) {
      zurückkehren;
    }

    ctx.moveTo(stPoint.x, stPoint.y);
    const Direction = Math.random() <
    stPoint.y += stepSize * Richtung;
    stPoint.x = startX + stepCount * 2;
    ctx.lineTo(stPoint.x, stPoint.y);
    ctx.lineWidth = 1;
    ctx.streich();
    stepCount++;
    requestAnimationFrame(drawStep);
  }
}

for(konstante Farbe der Farben)
{
  const startPoint = new Point(color);
  drawRandomWalk(startPoint, numSteps);
}

<canvas id="myCanvas" width="600" height="600"></canvas>

Answer 1

问题是，绘制线条的每一支“笔”都是共享状态的——你正在绘制一条由许多移动/线条组成的长路径，一遍又一遍。

如果您想要globalAlpha渐变效果(它依赖于能够一遍又一遍地绘制线条)，您需要分别跟踪每个笔绘制的轨迹，并绘制它，如下所示。

我去掉了Point结构，因为它不是真正需要的。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const numSteps = ctx.canvas.width / 2 + 10;
const stepSize = 10;
const startX = 0;
const startY = canvas.height / 2;
const timeInterval = 15;

const colors = [
  '#FF1493', // Pink
  '#FF00FF', // Magenta
  '#800080', // Purple
  '#4B0082', // Indigo
  '#0000FF', // Blue
  '#00FFFF', // Cyan
  '#00FF00', // Green
  '#FFFF00', // Yellow
  '#FF7F00', // Orange
  '#8B4513'  // Saddle Brown
];



function drawRandomWalk(startX, startY, color, nSteps) {
  setTimeout(drawStep, 10);
  const steps = [[startX, startY]];
  
  function drawStep() {
    if (steps.length >= nSteps) {
      return;
    }
    // Draw current line
    ctx.globalAlpha = 0.01;
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.lineWidth = 1;
    let x = 0, y = 0;
    for(let i = 0; i < steps.length; i++) {
      [x, y] = steps[i];
      if(i === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    }
    ctx.stroke();
    // Compute next point
    const direction = Math.random() < 0.5 ? -1 : 1;
    y += stepSize * direction;
    x = startX + steps.length * 2; 
    steps.push([x, y]);
    requestAnimationFrame(drawStep);
  }
}

for(const color of colors)
{
  drawRandomWalk(startX, startY, color, numSteps);
}

<canvas id="myCanvas" width="600" height="600"></canvas>