HTML5 Canvas stroke()绘制顺序改变时颜色异常问题咨询

核心原因 #

你遇到的问题本质是未在每次绘制前清除画布，叠加绘制加上Canvas的抗锯齿机制，导致视觉上出现颜色变化：

1. 画布未清除：每次调用drawLines时，新线条直接画在旧内容之上。打乱绘制顺序后，新线条会覆盖不同位置的旧线条，叠加后的颜色和原始设定色产生差异。
2. 抗锯齿干扰：Canvas默认lineWidth为1px，当你以整数x坐标（如i*5）绘制垂直线时，线条会落在两个物理像素的边界上，Canvas会启用抗锯齿平滑边缘，导致线条颜色看起来比设定值浅。多次叠加后，抗锯齿像素被重复绘制，颜色逐渐变深，视觉上就像颜色在变化。

修复代码 #

只需在每次绘制前用clearRect清除整个画布即可解决：

function drawLines() {
  const shuffledLines = [...lines];
  shuffle(shuffledLines);

  let ctx = canvas.getContext('2d');
  // 关键：清除画布所有内容
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  
  for (let i = 0; i < nbrLines; i++) {
    const line = shuffledLines[i];
    ctx.strokeStyle = line.color;
    ctx.beginPath();
    ctx.moveTo(line.x, 0);
    ctx.lineTo(line.x, canvasHeight);
    ctx.stroke();
  }
}

如果想彻底避免抗锯齿导致的颜色偏差，可以把线条的x坐标调整为半整数，让线条精准对齐物理像素：

ctx.moveTo(line.x + 0.5, 0);
ctx.lineTo(line.x + 0.5, canvasHeight);

补充说明 #

• 你尝试的save()/restore()在这里无效，因为你没有修改需要保存的上下文状态（如变换矩阵、裁剪区域），strokeStyle属于可直接覆盖的状态，不需要保存恢复。
• 清除画布是Canvas动态绘制的基础操作，几乎所有动画场景都需要先清除旧内容，再绘制新内容，避免叠加导致的视觉异常。

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