如何将Alpha与合成图像结合起来？

我有一个HTML5画布。我正在使用KineticJS（KonvaJS）画布库。画布包含一个图像，如下所示。现在我想擦除像素，但与某个透明度级别相结合。红点将擦除透明度为0的像素。这在this问题中解决。绿点擦除像素为0.5的透明度。透明度越高，橡皮擦效果越小。如何将Alpha与合成图像结合起来？

enter image description here

我如何定义橡皮擦的实力？

来源

2015-02-10 confile

enter image description here

您可以使用“目的地out`合成‘抹掉’像素的画布上。默认情况下，擦除将完全贯穿到背景。

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

但是，您还可以通过将globalAlpha设置为小于1.00来控制删除了多少alpha。这会导致擦除操作减少现有像素的阿尔法 - 与颜色混合类似。

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

来源

2015-02-10 21:25:10 markE

是globalAlpha aplied我是图像的当前像素还是您的情况下新绘制的方块？是否可以改变每个橡皮擦的alpha值还是总是一样的？ – confile 2015-02-10 21:53:52

好的事情是你可以改变globalAlpha只要你想！以前的擦除不会被感染，未来的擦除将在您的新globalAlpha中完成。如果擦除先前擦除的区域，则擦除将是先前的α擦除（s）和新的α擦除的总和。祝你的项目好运！ – markE 2015-02-10 22:13:44

你能帮我解决这个问题吗？ http://stackoverflow.com/questions/28638627/draw-smooth-lines-on-a-canvas – confile 2015-02-20 21:35:11

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

erasor的强度可能会通过alpha通道设置。希望能让你开始。

来源

2015-02-10 20:30:15 mika

如何将Alpha与合成图像结合起来？

回答

相关问题