双Canvas像素绘制故障：单色Canvas不显示求助

问题根源分析 #

• 单色Canvas无内容：你创建了imgData1但既没对它的像素数据赋值，也没调用ctx1.putImageData()将绘制数据渲染到第二个Canvas上。更关键的是，原代码中第一个本该操作imgData1.data的循环，误写成了修改imgData.data，等于完全没处理第二个Canvas的数据。
• 条纹绘制逻辑混乱：外层套了两层400×400的循环，内部又重复五次全量遍历imgData.data，不仅完全冗余，还导致条纹逻辑错误——按数据长度比例修改像素只会让顶部区域被多次覆盖，并非水平条纹的正确实现方式。

修复后的完整代码 #

<body>
  <canvas id="Canvas1" width="420" height="420" style="border:3px solid black"></canvas>
  <canvas id="Canvas2" width="420" height="420" style="border:3px solid black"></canvas>

<script>
  // 获取Canvas元素及绘图上下文
  const c = document.getElementById("Canvas1");
  const c1 = document.getElementById("Canvas2");
  const ctx = c.getContext("2d");
  const ctx1 = c1.getContext("2d");
  
  const drawSize = 400;
  const offset = 10; // 让内容在Canvas内居中的偏移量

  // --- 绘制第一个Canvas：4条水平条纹 ---
  const stripeImgData = ctx.createImageData(drawSize, drawSize);
  const stripeData = stripeImgData.data;

  // 按y坐标区间划分条纹，每条高度100px（400/4）
  for (let y = 0; y < drawSize; y++) {
    for (let x = 0; x < drawSize; x++) {
      const index = (x + y * drawSize) * 4;
      let r, g, b;

      if (y < 100) {
        r = 255; g = 0; b = 255; // 品红
      } else if (y < 200) {
        r = 255; g = 0; b = 0; // 红色
      } else if (y < 300) {
        r = 0; g = 255; b = 0; // 绿色
      } else {
        r = 0; g = 0; b = 255; // 蓝色
      }

      stripeData[index] = r;
      stripeData[index + 1] = g;
      stripeData[index + 2] = b;
      stripeData[index + 3] = 255; // 完全不透明
    }
  }
  ctx.putImageData(stripeImgData, offset, offset);

  // --- 绘制第二个Canvas：400px×400px单色区域 ---
  const solidImgData = ctx1.createImageData(drawSize, drawSize);
  const solidData = solidImgData.data;

  // 填充单色（示例为蓝色）
  for (let i = 0; i < solidData.length; i += 4) {
    solidData[i] = 0;
    solidData[i + 1] = 0;
    solidData[i + 2] = 255;
    solidData[i + 3] = 255;
  }
  ctx1.putImageData(solidImgData, offset, offset);
</script>
</body>
</html>

修复说明 #

• 移除了冗余的嵌套循环，改用y坐标区间实现水平条纹，逻辑清晰且效率更高
• 给第二个Canvas的像素数据正确赋值，并调用ctx1.putImageData()完成渲染
• 修正了原代码中误操作imgData代替imgData1的笔误
• 用常量替代魔法数字，提升代码可读性

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