画布中的RGBA像素加法Alpha值

时间:2017-07-21 18:12:06

标签: html canvas alpha

我正在使用HTML canvas元素,尝试将不透明度的形状绘制到其中,然后根据其不透明度对它们进行着色。例如,我可能会绘制一个带有rgba(0,0,0,.5)的正方形,另一个带有rgba(100, 100, 100, .5)的正方形。我的问题是:重叠对alpha值有什么影响?显然,a:.5之上的a:.5不会产生a:1 ...是否有一个公式?它是如何工作的?

1 个答案:

答案 0 :(得分:1)

有关Alpha混合和合成方式如何工作的所有公式都可以在规范中找到:

https://drafts.fxtf.org/compositing-1/#canvascompositingandblending

Alpha通道相乘(请参阅链接中的alpha混合公式),因此它们不会加起来为。

即。 (来源:同上):

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