Vue Canvas绘制多图：SVG自定义填充色被最后一个颜色覆盖问题求助

核心问题分析 #

• 重复清空画布：你在depict函数开头调用ctx.clearRect，导致每绘制一张图就清空之前所有内容，最终只显示最后一张图的效果。
• 异步绘制冲突：loadImage是异步操作，forEach循环会同时触发所有图片的加载和绘制，容易出现绘制顺序混乱、合成模式互相干扰的情况。
• 全局上下文未隔离：直接在主画布上修改globalCompositeOperation，若未正确隔离上下文，会影响后续其他图片的绘制逻辑。

修复后的代码实现 #

// 仅在所有绘制开始前清空一次画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 用Promise.all统一处理异步绘制，保证执行顺序和完成状态
Promise.all(this.inputs.map(options => {
  const myOptions = Object.assign({}, options);
  if (myOptions.ext === "svg") {
    return loadImage(myOptions.uri).then((img) => {
      // 创建离屏Canvas隔离SVG绘制上下文，避免影响主画布
      const offscreenCanvas = document.createElement('canvas');
      const offCtx = offscreenCanvas.getContext('2d');
      offscreenCanvas.width = 100;
      offscreenCanvas.height = 100;

      // 在离屏画布完成SVG的颜色填充
      offCtx.drawImage(img, 0, 0, 100, 100);
      offCtx.globalCompositeOperation = "source-in";
      offCtx.fillStyle = myOptions.clr;
      offCtx.fillRect(0, 0, 100, 100);
      offCtx.globalCompositeOperation = "source-over";

      // 将处理好的SVG绘制到主画布（可根据需求调整x、y坐标）
      ctx.drawImage(offscreenCanvas, 0, 0);
    });
  } else {
    return loadImage(myOptions.uri).then((img) => {
      // PNG若需要背景色，先绘制填充矩形再叠加图片；无需背景则直接drawImage
      ctx.fillStyle = myOptions.clr;
      ctx.fillRect(0, 0, 100, 100);
      ctx.drawImage(img, 0, 0, 100, 100);
    });
  }
})).then(() => {
  // 所有图片绘制完成后的回调（可选）
  console.log('所有图片绘制完成');
});

关键修改点说明 #

1. 移除重复清空操作：只在绘制流程开始时执行一次画布清空，保留所有图片的绘制结果。
2. 异步流程控制：用Promise.all替代forEach，确保所有图片加载和绘制操作按预期完成，避免异步导致的逻辑混乱。
3. 隔离SVG绘制上下文：通过离屏Canvas处理SVG的颜色填充，每个SVG的样式修改仅作用于自身，不会干扰主画布的其他绘制。
4. 修正PNG绘制逻辑：原代码中PNG的fillStyle无实际作用（图片会覆盖填充色），调整为先绘制背景色再叠加图片，符合常规需求。

额外提示 #

如果图片需要绘制在不同位置，可在options中传入x、y坐标参数，修改drawImage和fillRect的位置参数即可，示例：

// SVG绘制到指定位置
ctx.drawImage(offscreenCanvas, myOptions.x, myOptions.y);
// PNG绘制到指定位置
ctx.fillRect(myOptions.x, myOptions.y, 100, 100);
ctx.drawImage(img, myOptions.x, myOptions.y, 100, 100);

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