colors - 为什么 html 画布中的 alpha 像素不与背景颜色混合？

Question

http://jsfiddle.net/jBgqW/

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

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

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

Answer 1

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

但是，在这种情况下，您是手动设置值，因此不进行任何计算。您只是自己设置 rgba 值，这意味着 alpha 通道不用于计算，而只是更改而无需进一步使用。以前的颜色（红色）基本上以“蛮力”方式覆盖 - 而不是rgba(255, 0, 0, 255)，现在只是rgba(128, 53, 82, 0)。原来的红色已经被扔掉了。

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

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

Answer 2

这有点像线程死灵术，但我刚刚遇到了这个问题并有一个解决方案，如果不是为了原始海报，那么对于像我这样来自谷歌的人。

如前所述， putImageData 直接替换像素而不是 alpha 混合，但这也意味着它保留了您的 alpha 数据。然后，您可以使用 drawImage 使用 alpha 混合重绘该图像。

举个例子，假设我们有一个 200 x 100 像素的画布和一个 100 x 100 的 imageData 对象。

// our canvas

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

// our imageData, created in whatever fashion, with alpha as appropriate...
var data = /* ... */

// lets make the right half of our canvas blue
ctx.fillStyle="blue";
ctx.rect(100, 0, 100, 100);
ctx.fill();

// now draw our image data to the left (white) half, pixels are replaced
ctx.putImageData(data, 0, 0, 100, 100);

// now the magic, draw the canvas to itself with clipping
ctx.drawImage(canvas, 100, 0, 100, 100, 100, 0, 100, 100);

瞧。图像的右半部分现在是与蓝色背景混合的图像数据，在硬件辅助下渲染。