Canvas 中用 globalCompositeOperation 实现图片混合，其本质是像素级合成，需先后绘制图片并在第二张前设置该属性；CSS mix-blend-mode 适用于重叠的 img 元素但受限于 stacking context；SVG feBlend 更可控但性能开销大。
Canvas 中用 globalCompositeOperation 实现图片混合
HTML5 本身没有“图片混合模式”这个属性，真正起作用的是 CanvasRenderingContext2D 的 globalCompositeOperation。它控制的是绘图时新图形如何与已有内容进行像素级合成，类似 Photoshop 的图层混合模式。
要让两张图片叠加出“正片叠底”“滤色”等效果，必须把它们先后绘制到 上，并在第二张图绘制前设置该属性：
const ctx = canvas.getContext('2d');
ctx.drawImage(img1, 0, 0);
ctx.globalCompositeOperation = 'multiply'; // 正片叠底
ctx.drawImage(img2, 0, 0);
-
'multiply'、'screen'、'overlay'等值在现代浏览器中支持良好，但'color-burn'或'hard-light'在 Safari 中可能不生效 - 该设置是上下文状态的一部分，每次绘制前需确认是否被意外覆盖（比如其他绘图逻辑重置了它）
- 混合只对后续的
drawImage/fill/stroke生效，不影响已绘制内容
CSS mix-blend-mode 的适用边界
如果只是想让页面中两个重叠的 mix-blend-mode，但它有严格前提：
- 两张图必须处于同一 stacking context，且彼此重叠（例如都设
position: absolute并覆盖在同一区域） - 父容器不能有
isolation: isolate或transform等触发新 stacking context 的属性，否则混合会失效 - 背景图（
background-image）不参与mix-blend-mode，只有作为普通元素的
常见写法：
立即学习“前端免费学习笔记（深入）”；
@@##@@ @@##@@
.blend-container img:first-child { z-index: 1; }
.blend-container img:last-child {
mix-blend-mode: multiply;
z-index: 2;
}
SVG
当需要精确控制混合通道（比如只混合 RGB 不动 Alpha），或希望混合结果能被其他滤镜链式处理时，SVG 的
- 支持所有标准混合模式，包括
'color-dodge'和'luminosity'，兼容性比 Canvas 的部分值更好 - 每个
preserveAspectRatio或xlink:href动态切换资源 - 性能开销明显高于纯 CSS，尤其在频繁更新图片时，容易触发重绘瓶颈
混合后导出为 PNG 的坑：Alpha 通道和颜色空间
用 canvas.toDataURL('image/png') 导出混合结果时，容易忽略两点：
- 混合后的像素已经包含透明度信息，但若原始图片带 ICC 配置文件（如 Adobe RGB），Canvas 默认按 sRGB 解析，可能导致颜色偏灰或过饱和
-
globalCompositeOperation = 'lighten'类模式在浅色背景上导出后，可能因背景未显式清除而残留半透灰边——务必在绘制前调用ctx.clearRect(0, 0, w, h) - 某些混合模式（如
'exclusion'）在低精度 canvas（如willReadFrequently: true）下计算结果会有微小偏差，不适合做设计稿交付
混合不是样式开关，而是像素运算。选哪种方式，取决于你控制权在哪一层：DOM 结构简单就用 CSS；要动态叠加多图就靠 Canvas；要嵌入矢量流程或复用滤镜链，SVG 是唯一选择。
