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

【问题标题】：Why doesn't the alpha pixel in html canvas blend in with the background color?为什么 html 画布中的 alpha 像素不与背景颜色混合？
【发布时间】：2011-09-10 07:50:46
【问题描述】：

http://jsfiddle.net/jBgqW/

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

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

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

【问题讨论】：

标签： colors html5-canvas alphablending

【解决方案1】：

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

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

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

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

【讨论】：

我不明白红色怎么会简单地消失。它已经在那里绘制了，我认为从画布位置获取图像数据并更改这些值不会影响已经绘制的内容。为什么 putImageData() 不自己进行 alpha 计算呢？你确定吗？
putImageData 不组合颜色，而是明确设置它们。它不是无用的，但它使用 alpha 作为 父元素颜色。如果您确实想将红色和您自己的红色结合起来，您可以自己进行计算，因为您知道 alpha 值。例如，像这样：jsfiddle.net/jBgqW/2（将 alpha 设置为 100 并在计算绿色量时考虑此值）。

【解决方案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);

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

【讨论】：