如何在图像中将alpha与合成相结合？

Question

我有一个HTML5 Canvas。我正在使用KineticJS（KonvaJS）画布库。画布包含一个Image，如下所示。现在我想要擦除像素，但要与某个透明度级别相结合。红点擦除了透明度为0的像素。这在this问题中得到了解决。绿点擦除透明度为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通道设置erasor的强度。希望能让你开始。