融合在畫布

我有一個畫布，我畫許多不同的PNG圖像不同的圖像在圖像區域繪製 - 在炸彈上，而不是在圖像的邊界部分。融合在畫布

這是我想要的結果

enter image description here

我試圖通過執行該代碼

context.drawImage(image, drawLocSize[0], drawLocSize[1], drawLocSize[2],  drawLocSize[3]); 

context.fillStyle = wantedColor; 
context.globalCompositeOperation = "multiply"; 
context.fillRect(drawLocSize[0], drawLocSize[1], drawLocSize[2], drawLocSize[3]); 
context.globalCompositeOperation = "source-over";

這樣做的，如預期我得到這個結果。

enter image description here

也試過畫，而不是fillrect形象，但並沒有正常工作。

問題是我該如何做，只在圖像區域，而不是圖像矩形。並且在這種情況下，當炸彈將彼此相連時，結果將是下面的炸彈將由它的顏色和上面的炸彈顏色組合。這對我不好。

由於分配的圖像，不同的顏色和繪製中的許多變化，我不想重新處理每個圖像。

我在WebGL中做了同樣的事情，只是在片段着色器中將我的片段顏色與混合顏色相乘。我想在Context2D中做同樣的事情。

來源

2014-10-22 Raziza O

請向我們顯示您的代碼。 – 2014-10-22 08:15:48

分享你的研究可以幫助每個人。告訴我們你試過了什麼，以及它爲什麼不符合你的需求。這表明你已經花時間去嘗試幫助自己，它使我們避免重申明顯的答案，最重要的是它可以幫助你得到更具體和相關的答案！另請參閱[如何問]（http://stackoverflow.com/questions/how-to-ask） – Cerbrus 2014-10-22 08:16:25

我已更新我的問題。 – 2014-10-22 08:49:43

找到了解決方案。但它有兩個繪圖階段。

首先在臨時畫布上使用'source-atop'合成圖像在圖像頂部填充矩形，然後將其在主畫布上相乘。

首先我創建一個畫布並獲取它的上下文一次。

this._tmpCanvas = document.createElement("canvas"); 
this._tmpCtx = this._tmpCanvas.getContext('2d');

然後在我的畫週期我這樣做

ctx.drawImage(currPtData.image, drawLocSize[0], drawLocSize[1], drawLocSize[2], drawLocSize[3]); 

this._tmpCanvas.width = drawLocSize[2]; 
this._tmpCanvas.height = drawLocSize[3]; 

this._tmpCtx.drawImage(currPtData.image, 0, 0, drawLocSize[2], drawLocSize[3]); 
this._tmpCtx.globalCompositeOperation = 'source-atop'; 
this._tmpCtx.fillStyle = 'red'; 
this._tmpCtx.fillRect(0, 0, drawLocSize[2], drawLocSize[3]);

臨時帆布看現在這個樣子 enter image description here - （它可以節省透明度以及）。現在，我們將這個畫布放在我們的主要背景中。

ctx.globalCompositeOperation = "multiply"; 
ctx.drawImage(this._tmpCanvas, drawLocSize[0], drawLocSize[1], drawLocSize[2], drawLocSize[3]); 
// setting the composite back 
ctx.globalCompositeOperation = "source-over";

而結果這個樣子的 enter image description here 。

但是，如果有更好的表現解決方案，我仍然開放。

來源

2014-10-22 10:06:50

回答

相關問題