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

Question

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

如何定义橡皮擦的强度？

Answer 1

// 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 通道设置。希望这能让你入门。

Answer 2

您可以使用“destination-out”合成到 canvas 上的 "erase" 像素。默认情况下，擦除将完全贯穿到后台。

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

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

How can I combine alpha with compositing in Images?

html

javascript

canvas

kineticjs

konvajs