ctx交替。使用requestAnimationFrame()时使用strokeStyle

Question

我试图绘制简单的随机运动作为我的登陆页面的背景画布，我很难让线条具有独特的颜色。

我也试过在电影之后改变它，但没有成功(只是看起来是混合的颜色)。

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 colors = [
  '#FF1493', // Pink
  '#FF00FF', // Magenta
  '#800080', // Purple
  '#4B0082', // Indigo
  '#0000FF', // Blue
  '#00FFFF', // Cyan
  '#00FF00', // Green
  '#FFFF00', // Yellow
  '#FF7F00', // Orange
  '#8B4513'  // Saddle Brown
];



function drawRandomWalk(stPoint, steps) {
  ctx.globalAlpha = 0.01;
  let stepCount = 0;
  ctx.beginPath();
  ctx.strokeStyle = stPoint.color;
  ctx.moveTo(stPoint.x, stPoint.y);
  setTimeout(drawStep, 10);
  
  function drawStep() {
    if (stepCount >= steps) {
      return;
    }

    ctx.moveTo(stPoint.x, stPoint.y);
    const direction = Math.random() < 0.5 ? -1 : 1;
    stPoint.y += stepSize * direction;
    stPoint.x = startX + stepCount * 2; 
    ctx.lineTo(stPoint.x, stPoint.y);
    ctx.lineWidth = 1;
    ctx.stroke();
    stepCount++;
    requestAnimationFrame(drawStep);
  }
}

for(const color of colors)
{
  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>