如何以通用兼容的方式实现两个HTML元素的颜色叠加？

嘿，这个需求我太懂了——之前做可视化项目时就碰到过，想让Canvas的颜色和背景色直接做纯加法叠加（也就是你说的Canvas颜色A + 背景颜色B，最终得到A+B的效果），但翻遍CSS的mix-blend-mode属性，发现它居然没有直接对应这种“纯加法”的选项，当时可把我愁坏了。

先给你掰扯下现有CSS混合模式的问题：

• screen模式：这是最接近的选项之一，但它的计算逻辑是1 - (1 - A) * (1 - B)，展开后其实是A + B - A*B，和你要的纯加法差了个-A*B的项，叠加出来的亮部会比真正的A+B暗一点，达不到那种通透的“直接相加”效果。
• plus-lighter模式：这个属性的效果倒是几乎和纯加法一致，但它的兼容性实在拉胯，像IE这种旧浏览器完全不支持，要是你的项目需要覆盖广泛的用户群体，这个选项根本没法用。

那有没有通用兼容的办法呢？其实可以绕开CSS混合模式，用Canvas API手动处理像素来实现：

• 第一步：先把背景区域的颜色数据读出来。如果背景是某个HTML元素，你可以先创建一个临时Canvas，把那个元素的内容画到临时Canvas上，再用getImageData获取它的像素数据；如果背景是纯色，直接用对应的RGB值就行。
• 第二步：获取目标Canvas上的像素数据，用getImageData拿到每个像素的R、G、B通道值。
• 第三步：对每个像素的三个颜色通道分别做加法运算，注意要限制最大值在255以内（避免颜色溢出）：

  // 假设A是Canvas像素，B是背景像素
  newR = Math.min(A.r + B.r, 255);
  newG = Math.min(A.g + B.g, 255);
  newB = Math.min(A.b + B.b, 255);
  

• 第四步：把计算好的新像素数据用putImageData放回目标Canvas，这样就得到了纯加法叠加的效果。

这种方法的兼容性拉满，只要支持Canvas API的浏览器（IE9及以上都没问题）都能跑，完全不依赖CSS的新特性。虽然要写点JS代码手动处理像素，但胜在稳定可靠，能完美实现你要的A+B颜色叠加效果。

内容来源于stack exchange