BlendMode 的数学原理：Porter-Duff 混合模式在 Canvas 绘图中的应用
大家好，今天我们来深入探讨一个在Canvas绘图中至关重要的概念：BlendMode，特别是Porter-Duff混合模式。BlendMode定义了如何将一个源像素（通常是我们要绘制的新像素）与目标像素（已经存在于Canvas上的像素）进行组合，从而产生最终显示的像素。理解BlendMode的数学原理能够帮助我们更好地控制Canvas绘图效果，创造出更加复杂和精美的视觉呈现。
1. 像素的组成与颜色表示
在深入混合模式之前，我们先来回顾一下像素的组成。在Canvas中，我们通常使用RGBA颜色模型来表示一个像素。RGBA分别代表Red（红色）、Green（绿色）、Blue（蓝色）和Alpha（透明度）。每个分量的值通常在0到255之间，或者在0.0到1.0之间（取决于具体的实现和API）。
- Red, Green, Blue (RGB): 这三个分量决定了像素的颜色。例如，(255, 0, 0)代表纯红色，(0, 255, 0)代表纯绿色，(0, 0, 255)代表纯蓝色。
- Alpha (A): Alpha分量表示像素的透明度。值为0表示完全透明，值为255（或1.0）表示完全不透明。Alpha值决定了像素在与其背景混合时，背景像素的可见程度。
在后续的公式中，我们将使用以下符号：
Cs, Cr, Ca: 源像素（Source）的红色、绿色、蓝色和Alpha分量。Cd, Cg, Cb, Da: 目标像素（Destination）的红色、绿色、蓝色和Alpha分量。Cf, Cg, Cb, Af: 最终像素（Final）的红色、绿色、蓝色和Alpha分量。
通常，在混合运算中，RGB分量的计算方式是相同的，因此为了简化描述，我们通常只讨论一个颜色分量 C。
2. Porter-Duff 混合模式概览
Porter-Duff混合模式是由 Thomas Porter 和 Tom Duff 在1984年提出的，它们定义了一组12种基本的图像合成操作。这些操作基于源像素和目标像素的Alpha值，使用简单的数学公式来确定最终像素的颜色和Alpha值。
Canvas API 提供了一个 globalCompositeOperation 属性，用于设置当前的混合模式。该属性可以设置为以下值（部分，因为还有一些非Porter-Duff模式）：
source-over(默认值)source-insource-outsource-atopdestination-overdestination-indestination-outdestination-atoplightercopyxor
每种混合模式都对应着一个特定的数学公式，决定了源像素和目标像素如何组合。
3. Porter-Duff 混合模式的数学公式
现在，我们来详细介绍几种常见的Porter-Duff混合模式，并给出它们的数学公式。
3.1 source-over (默认值)
source-over 模式是最常用的混合模式。它将源像素绘制在目标像素之上。其公式如下：
Cf = Cs * (1 - Da) + CdAf = As + Ad * (1 - As)
这个公式表明：最终颜色等于源颜色乘以目标Alpha的补值，再加上目标颜色。最终Alpha等于源Alpha加上目标Alpha乘以源Alpha的补值。
代码示例:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形作为目标
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillRect(50, 50, 100, 100);
// 设置混合模式为 source-over
ctx.globalCompositeOperation = 'source-over';
// 绘制一个蓝色矩形作为源
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
ctx.fillRect(100, 75, 100, 100);在这个例子中，蓝色矩形将覆盖在红色矩形之上，因为source-over是默认的混合模式。由于两个矩形都是半透明的，所以重叠区域的颜色会受到两个颜色的影响。
3.2 destination-over
destination-over 模式与 source-over 模式相反。它将目标像素绘制在源像素之上。其公式如下：
Cf = Cd * (1 - As) + CsAf = Ad + As * (1 - Ad)
这个公式表明：最终颜色等于目标颜色乘以源Alpha的补值，再加上源颜色。最终Alpha等于目标Alpha加上源Alpha乘以目标Alpha的补值。
代码示例:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形作为目标
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillRect(50, 50, 100, 100);
// 设置混合模式为 destination-over
ctx.globalCompositeOperation = 'destination-over';
// 绘制一个蓝色矩形作为源
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
ctx.fillRect(100, 75, 100, 100);在这个例子中，红色矩形将覆盖在蓝色矩形之上。
3.3 source-in
source-in 模式只保留源像素中与目标像素重叠的部分。其他部分将被透明化。其公式如下：
Cf = Cs * DaAf = As * Ad
这个公式表明：最终颜色等于源颜色乘以目标Alpha。最终Alpha等于源Alpha乘以目标Alpha。
代码示例:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形作为目标
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillRect(50, 50, 100, 100);
// 设置混合模式为 source-in
ctx.globalCompositeOperation = 'source-in';
// 绘制一个蓝色矩形作为源
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
ctx.fillRect(100, 75, 100, 100);在这个例子中，只有蓝色矩形与红色矩形重叠的部分才会被显示。蓝色矩形不与红色矩形重叠的部分将变为透明。
3.4 destination-in
destination-in 模式只保留目标像素中与源像素重叠的部分。其他部分将被透明化。其公式如下：
Cf = Cd * AsAf = Ad * As
这个公式表明：最终颜色等于目标颜色乘以源Alpha。最终Alpha等于目标Alpha乘以源Alpha。
代码示例:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形作为目标
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillRect(50, 50, 100, 100);
// 设置混合模式为 destination-in
ctx.globalCompositeOperation = 'destination-in';
// 绘制一个蓝色矩形作为源
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
ctx.fillRect(100, 75, 100, 100);在这个例子中，只有红色矩形与蓝色矩形重叠的部分才会被显示。红色矩形不与蓝色矩形重叠的部分将变为透明。
3.5 source-out
source-out 模式只保留源像素中不与目标像素重叠的部分。与目标像素重叠的部分将被透明化。其公式如下：
Cf = Cs * (1 - Da)Af = As * (1 - Ad)
这个公式表明：最终颜色等于源颜色乘以目标Alpha的补值。最终Alpha等于源Alpha乘以目标Alpha的补值。
代码示例:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形作为目标
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillRect(50, 50, 100, 100);
// 设置混合模式为 source-out
ctx.globalCompositeOperation = 'source-out';
// 绘制一个蓝色矩形作为源
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
ctx.fillRect(100, 75, 100, 100);在这个例子中，只有蓝色矩形不与红色矩形重叠的部分才会被显示。蓝色矩形与红色矩形重叠的部分将变为透明。
3.6 destination-out
destination-out 模式只保留目标像素中不与源像素重叠的部分。与源像素重叠的部分将被透明化。其公式如下：
Cf = Cd * (1 - As)Af = Ad * (1 - As)
这个公式表明：最终颜色等于目标颜色乘以源Alpha的补值。最终Alpha等于目标Alpha乘以源Alpha的补值。
代码示例:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形作为目标
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillRect(50, 50, 100, 100);
// 设置混合模式为 destination-out
ctx.globalCompositeOperation = 'destination-out';
// 绘制一个蓝色矩形作为源
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
ctx.fillRect(100, 75, 100, 100);在这个例子中，只有红色矩形不与蓝色矩形重叠的部分才会被显示。红色矩形与蓝色矩形重叠的部分将变为透明。
3.7 source-atop
source-atop 模式只保留源像素中与目标像素重叠的部分，并将其绘制在目标像素之上。其公式如下：
Cf = Cs * Da + Cd * (1 - As)Af = As * Ad + Ad * (1 - As) = Ad
这个公式表明：最终颜色等于源颜色乘以目标Alpha，加上目标颜色乘以源Alpha的补值。最终Alpha等于目标Alpha。
代码示例:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形作为目标
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillRect(50, 50, 100, 100);
// 设置混合模式为 source-atop
ctx.globalCompositeOperation = 'source-atop';
// 绘制一个蓝色矩形作为源
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
ctx.fillRect(100, 75, 100, 100);在这个例子中，只有蓝色矩形与红色矩形重叠的部分会被显示，并且最终的Alpha值等于红色矩形的Alpha值。
3.8 destination-atop
destination-atop 模式只保留目标像素中与源像素重叠的部分，并将其绘制在源像素之上。其公式如下：
Cf = Cd * As + Cs * (1 - Da)Af = Ad * As + As * (1 - Ad) = As
这个公式表明：最终颜色等于目标颜色乘以源Alpha，加上源颜色乘以目标Alpha的补值。最终Alpha等于源Alpha。
代码示例:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形作为目标
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillRect(50, 50, 100, 100);
// 设置混合模式为 destination-atop
ctx.globalCompositeOperation = 'destination-atop';
// 绘制一个蓝色矩形作为源
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
ctx.fillRect(100, 75, 100, 100);在这个例子中，只有红色矩形与蓝色矩形重叠的部分会被显示，并且最终的Alpha值等于蓝色矩形的Alpha值。
3.9 lighter (加法混合)
lighter 模式将源像素和目标像素的颜色值相加。如果相加的结果超过了最大值（例如，255），则结果将被截断为最大值。其公式如下（简化版本，实际实现可能更复杂）：
Cf = min(Cs + Cd, 1)(假设颜色分量在0到1之间)Af = As + Ad * (1 - As)
代码示例:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形作为目标
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillRect(50, 50, 100, 100);
// 设置混合模式为 lighter
ctx.globalCompositeOperation = 'lighter';
// 绘制一个蓝色矩形作为源
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
ctx.fillRect(100, 75, 100, 100);在这个例子中，重叠区域的颜色将是红色和蓝色的颜色值相加的结果。这种模式通常用于模拟光照效果。
3.10 copy
copy 模式直接用源像素替换目标像素。其公式如下：
Cf = CsAf = As
代码示例:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形作为目标
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillRect(50, 50, 100, 100);
// 设置混合模式为 copy
ctx.globalCompositeOperation = 'copy';
// 绘制一个蓝色矩形作为源
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
ctx.fillRect(100, 75, 100, 100);在这个例子中，蓝色矩形将完全替换红色矩形，忽略红色矩形的任何信息。
3.11 xor (异或)
xor 模式只保留源像素和目标像素中不重叠的部分。重叠的部分将被透明化。其公式如下：
Cf = Cs * (1 - Da) + Cd * (1 - As)Af = As * (1 - Ad) + Ad * (1 - As)
代码示例:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形作为目标
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillRect(50, 50, 100, 100);
// 设置混合模式为 xor
ctx.globalCompositeOperation = 'xor';
// 绘制一个蓝色矩形作为源
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明蓝色
ctx.fillRect(100, 75, 100, 100);在这个例子中，只有红色矩形和蓝色矩形不重叠的部分才会被显示。重叠的部分将变为透明。
4. 混合模式的实际应用
理解了Porter-Duff混合模式的数学原理，我们就可以在Canvas绘图中创造出各种各样的效果。以下是一些常见的应用场景：
- 图像合成: 将多个图像组合在一起，创建复杂的场景。
- 光照效果: 使用
lighter模式模拟光照效果，增强图像的真实感。 - 遮罩: 使用
source-in或destination-in模式创建遮罩，只显示图像的特定部分。 - 抠图: 使用
source-out或destination-out模式从图像中移除背景。 - 特效: 结合多种混合模式，创造出独特的视觉效果。
5. 性能考虑
虽然混合模式非常强大，但在使用时也需要考虑性能问题。复杂的混合模式，尤其是那些涉及到大量计算的模式，可能会降低绘图性能。因此，在实际应用中，我们需要根据具体的需求选择合适的混合模式，并尽量避免过度使用。
6. 总结
总的来说，Porter-Duff混合模式是Canvas绘图中一个非常重要的概念。通过理解其数学原理，我们可以更好地控制绘图效果，创造出更加复杂和精美的视觉呈现。在实际应用中，我们需要根据具体的需求选择合适的混合模式，并注意性能问题。
7. 深入理解是关键
掌握BlendMode的数学原理对于高级Canvas绘图至关重要。理解每种模式的公式，并结合实际的代码示例进行练习，可以帮助你更好地掌握这些技术，并在实际项目中灵活运用。