javascript - 如何将 alpha 与图像中的合成结合起来？

Question

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

如何定义橡皮擦的强度？

Answer 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);

Answer 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 通道设置。希望这能让你开始。