colors - 为什么 html canvas 中的 alpha 像素不与背景颜色融合？

Question

http://jsfiddle.net/jBgqW/

我已经使用 fillRect 和 fillStyle 设置为 rgb(255,0,0) 绘制背景，但是当我遍历像素并将 alpha 像素的一些随机颜色和值设置为 0 一切都变成白色。我假设当像素是透明的时，它应该与之前绘制的背景颜色混合，或者它总是默认为白色。

我希望这只是我使用 Canvas 的错误方式。

谁能解释为什么在这种情况下背景不是红色的，以及我如何正确使用 alpha 像素？我想知道这是否与 alpha 预乘有关。

Answer 1

当使用 globalAlpha 时，像素颜色是根据当前 rgba 值和新值计算的。

但是，在这种情况下，您是手动设置值，因此不进行任何计算。您只是自己设置 rgba 值，这意味着 alpha channel 不用于计算，而只是在没有进一步使用的情况下进行了更改。以前的颜色(红色)基本上以“强力”方式被覆盖 - 而不是 rgba(255, 0, 0, 255)，现在只是 rgba(128, 53, 82 , 0)。原本的红色，干脆丢掉了。

因此，0 的 alpha 表示完全透明，因此您可以看到父元素的颜色。

如果您更改正文背景颜色，可以确认这一点:http://jsfiddle.net/jBgqW/2/ .