使用requestAnimationFrame()时切换ctx.strokeStyle实现线条独色的问题

核心问题分析 #

• 你在drawRandomWalk里只调用了一次ctx.beginPath()，多条轨迹共享同一个Canvas路径上下文，每次stroke()都会把所有未闭合的路径重新绘制，再加上globalAlpha=0.01的叠加效果，直接导致颜色混合。
• drawStep里没有为单条轨迹维护独立路径，一直在同一个路径上追加线段，进一步加剧了颜色污染。

修复方案 #

要让每条轨迹颜色独立，关键是让每条轨迹拥有自己的独立路径，避免互相干扰：

1. 在drawStep内部每次绘制前调用ctx.beginPath()，重新开启当前轨迹的路径
2. 把globalAlpha的设置放到绘制逻辑内，确保只作用于当前轨迹
3. 每次绘制前重新设置strokeStyle，保证颜色正确绑定当前轨迹

修改后的JavaScript代码 #

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;

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) {
  let stepCount = 0;
  setTimeout(drawStep, 10);
  
  function drawStep() {
    if (stepCount >= steps) {
      return;
    }

    // 每次绘制前开启新路径，隔离当前轨迹与其他轨迹
    ctx.beginPath();
    // 绑定当前轨迹的颜色和透明度
    ctx.strokeStyle = stPoint.color;
    ctx.globalAlpha = 0.5; // 可根据视觉需求调整透明度
    ctx.lineWidth = 1;
    
    // 绘制当前轨迹的单段路径
    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.stroke();
    
    stepCount++;
    requestAnimationFrame(drawStep);
  }
}

for(const color of colors)
{
  const startPoint = new Point(color);
  drawRandomWalk(startPoint, numSteps);
}

HTML代码（保持不变） #

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

额外优化建议 #

• 如果想要轨迹更连贯，可以把beginPath放到drawRandomWalk开头，在drawStep里只添加线段，最后在轨迹完成时统一调用stroke，这种方式适合静态轨迹绘制。
• globalAlpha的值可以自由调整，0.5比原代码的0.01清晰度更高，你可以根据着陆页的视觉风格修改。

内容的提问来源于stack exchange，提问作者matthewzz