Canvas循环绘制网格时笔触颜色无法交替变更该如何解决？

你现有代码的颜色判断逻辑仅在shift能被40整除时使用深灰色，其余场景统一使用浅灰色，因此无法实现按规则交替显示深色线条的需求，调整颜色判断逻辑即可实现预期效果，完整代码如下：

HTML代码 #

<canvas id="canvas" class="plot" width="300" height="300"></canvas>

JavaScript代码 #

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.translate(0.5, 0.5); // 解决1像素线条模糊问题

let shift = 0;
const w = canvas.width; // 直接取画布设定的像素宽度，避免CSS尺寸差异导致变形

while (shift <= w) {
  // 每2条10px间隔的线为一组，交替使用深/浅灰色
  ctx.strokeStyle = Math.floor(shift / 20) % 2 === 0 ? 'gray' : 'silver';
  ctx.moveTo(shift, w);
  ctx.lineTo(w, w - shift);
  shift += 10;
}
ctx.stroke();

自定义调整说明 #

• 若要调整深色线条的出现间隔，修改Math.floor(shift / 20)中的20即可：比如需要每4条线切换一次深色，就将20改为40
• 若要实现双向网格，只需新增一套循环，将坐标的x/y方向逻辑反转绘制另一方向的斜线即可

内容的提问来源于stack exchange，提问作者Alexandra Danith Ansley