如何在Canvas Context2d中用指定颜色绘制单色图像且不擦除画布原有内容？

嘿，这个问题我之前踩过坑！你说的那种用globalCompositeOperation却擦除画布的情况，大概率是直接在主画布上操作合成模式导致的。其实不用getImageData/putImageData这种繁琐的方法也能搞定，关键是用离屏画布先把单色图像转成目标颜色，再画到主画布上，完全不会影响原有内容。

具体实现步骤 #

• 先创建一个和目标图像尺寸一致的离屏画布
• 在离屏画布上绘制原始的单色图像
• 切换离屏画布的合成模式为source-in，用目标颜色填充整个离屏画布——这一步只会保留图像区域的颜色，透明区域依旧保持透明
• 最后把处理好的离屏画布以默认的source-over模式绘制到主画布上，不会覆盖任何原有内容

代码示例 #

// 假设你已获取到原始单色图像img、主画布canvas及其上下文ctx
const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');

// 让离屏画布匹配图像尺寸
offscreenCanvas.width = img.width;
offscreenCanvas.height = img.height;

// 1. 在离屏画布绘制原始单色图像
offscreenCtx.drawImage(img, 0, 0);

// 2. 转换图像颜色：用合成模式保留图像区域，填充目标颜色
offscreenCtx.globalCompositeOperation = 'source-in';
offscreenCtx.fillStyle = '#f00'; // 替换成你想要的目标颜色
offscreenCtx.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);

// 3. 将处理好的彩色图像绘制到主画布的指定位置(x,y)
ctx.drawImage(offscreenCanvas, x, y);

原理说明 #

source-in合成模式的作用是：只保留新绘制内容（填充的目标色）与已有内容（原始单色图像）重叠的区域，其余区域变为透明。因为我们全程在离屏画布上完成颜色转换，主画布的原有内容完全不会被触碰，最后以正常合成模式绘制处理后的图像，自然就不会擦除任何原有内容啦。

如果只是简单的颜色反转，也可以试试ctx.filter属性，但要实现任意颜色转换，上述离屏画布的方法兼容性和可控性都更强。

备注：内容来源于stack exchange，提问作者user29889977