Canvas 中的 RGBA 像素加法 Alpha 值
RGBA Pixel Addition Alpha Value in Canvas
我正在使用 HTML
canvas
元素,尝试在其中绘制具有不透明度的形状,然后根据它们的不透明度为它们着色。例如,我可能会用 rgba(0,0,0,.5)
绘制一个正方形,然后用 rgba(100, 100, 100, .5)
绘制另一个重叠的正方形。我的问题是:重叠对 alpha
值有什么影响?显然,在 a:.5
之上的 a:.5
不会产生 a:1
... 有公式吗?它是如何工作的?
有关 alpha 混合和合成如何工作的所有公式都可以在规范中找到:
https://drafts.fxtf.org/compositing-1/#canvascompositingandblending
Alpha 通道相乘(参见 link 中的 alpha 混合公式),因此它们加起来不会等于 1。
即(来源:同上):
co = Cs x αs + Cb x αb x (1 - αs)
在哪里
co: the premultiplied pixel value after compositing
Cs: the color value of the source graphic element being composited
αs: the alpha value of the source graphic element being composited
Cb: the color value of the backdrop
αb: the alpha value of the backdrop
我正在使用 HTML
canvas
元素,尝试在其中绘制具有不透明度的形状,然后根据它们的不透明度为它们着色。例如,我可能会用 rgba(0,0,0,.5)
绘制一个正方形,然后用 rgba(100, 100, 100, .5)
绘制另一个重叠的正方形。我的问题是:重叠对 alpha
值有什么影响?显然,在 a:.5
之上的 a:.5
不会产生 a:1
... 有公式吗?它是如何工作的?
有关 alpha 混合和合成如何工作的所有公式都可以在规范中找到:
https://drafts.fxtf.org/compositing-1/#canvascompositingandblending
Alpha 通道相乘(参见 link 中的 alpha 混合公式),因此它们加起来不会等于 1。
即(来源:同上):
co = Cs x αs + Cb x αb x (1 - αs)
在哪里
co: the premultiplied pixel value after compositing
Cs: the color value of the source graphic element being composited
αs: the alpha value of the source graphic element being composited
Cb: the color value of the backdrop
αb: the alpha value of the backdrop