如何在图像中组合alpha和合成？ [英] How can I combine alpha with compositing in Images?

问题描述

我有一个HTML5画布。我使用的是KineticJS（KonvaJS）canvas库。画布包含如下所示的图像。现在我想擦除像素，但结合一定的透明度级别。红点删除透明度为0的像素。这在这个问题。绿点擦除透明度为0.5的像素。透明度越高，橡皮擦的效果越小。

I have an HTML5 Canvas. I am using the KineticJS(KonvaJS) canvas library. The canvas contains an Image as shown below. Now I want to erase pixels but being combined with a certain transparency level. The red dot erases the pixels with transparency 0. This was solved in this question. The green dot erases the pixel with transparency level of 0.5. The higher the transparency the smaller is the effect of the eraser.

如何定义橡皮擦的强度？

How can I define the strength of the eraser?

推荐答案

>

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

You can use 'destination-out` compositing to "erase" pixels on a canvas. By default, the erasure will be completely through to the background.

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

但是你也可以通过设置globalAlpha小于1.00来控制多少alpha被删除。这会导致擦除减少现有像素的alpha值 - 类似于颜色混合。

But you can also control how much alpha is erased by setting the globalAlpha to less than 1.00. This causes the erasure to reduce the alpha of the existing pixels--similar to color blending.

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

这篇关于如何在图像中组合alpha和合成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！