如何将 alpha 与图像中的合成结合起来？答案

【问题标题】：How can I combine alpha with compositing in Images?如何将 alpha 与图像中的合成结合起来？
【发布时间】：2015-04-11 00:59:42
【问题描述】：

我有一个 HTML5 画布。我正在使用 KineticJS(KonvaJS) 画布库。画布包含一个图像，如下所示。现在我想擦除像素，但要结合一定的透明度级别。红点擦除透明度为 0 的像素。这已在 this 问题中解决。绿点擦除透明度为 0.5 的像素。透明度越高，橡皮擦的效果越小。

如何定义橡皮擦的力度？

【问题讨论】：

标签： javascript html canvas kineticjs konvajs

【解决方案1】：

您可以使用“destination-out”合成来“擦除”画布上的像素。默认情况下，擦除将完全进入后台。

ctx.drawImage(img,0,0);
ctx.globalCompositeOperation='destination-out';
ctx.fillRect(100,50,50,50);

但您也可以通过将 globalAlpha 设置为小于 1.00 来控制消除多少 alpha。这会导致擦除降低现有像素的 alpha - 类似于颜色混合。

ctx.drawImage(img,0,0);
ctx.globalCompositeOperation='destination-out';
ctx.globalAlpha=0.50;
ctx.fillRect(200,50,50,50);

【讨论】：

在您的情况下，globalAlpha 是应用在图像的当前像素还是新绘制的正方形上？是否可以改变每个橡皮擦的 alpha 值还是始终相同？
不错的是，您可以随时更改 globalAlpha！之前的擦除不受影响，任何未来的擦除都将在您的新 globalAlpha 上完成。如果您在先前擦除的区域上擦除，则擦除将是先前 alpha 擦除和新 alpha 擦除的总和。祝你的项目好运！
你能帮我解决这个问题吗？ stackoverflow.com/questions/28638627/…

【解决方案2】：

// Get the canvas pixel array.
var img = context.getImageData(x, y, w, h);

// then loop through the array 
// modifying each pixel one by one as you need
for (var i = 0, l = img.data.length; i < l; i += 4) {
    img.data[i  ] = ...; // red
    img.data[i+1] = ...; // green
    img.data[i+2] = ...; // blue
    img.data[i+3] = ...; // alpha
}

// put back the data in canvas
context.putImageData(img, x, y);

橡皮擦的强度可能会通过 Alpha 通道设置。希望这能让你开始。

【讨论】：