Question

http://jsfiddle.net/jBgqW/

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

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

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

Answer 1

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

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

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

如果您更改了正文背景颜色，则可以确认：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);

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

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

2 个答案: