如何將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與合成圖像結合起來？

回答

相關問題