將globalCompositeOperation用於有限數量的圖像

我有一個非常簡單的問題：是否可以將globalCompositeOperation僅用於有限數量的圖像？將globalCompositeOperation用於有限數量的圖像

例如，我在畫布上畫了很多東西。除了一切之外，完成了無關的操作，我想對兩個圖像進行一些操作（我只想顯示結果，而不是兩個圖像）。如何做到這一點？

現在，做這樣的操作會影響下面已經繪製的所有東西。

所以我找到的解決方案是在另一個畫布中進行操作，我在主畫布上顯示該畫布。但是這看起來很糟糕。首先，它擊中了表演。然後，它不覺得直觀。最後，我放鬆了對圖層的控制權：第二個畫布中的任何內容都將始終放在第一個畫布上。

這看起來像一個非常簡單的功能，我希望我只是在谷歌搜索不好！

非常感謝！

來源

2016-11-04 Skeptron

創建一個屏幕外畫布並將其用作工作空間。只要你有RAM來存儲它們，你可以創建很多。

要創建一個屏幕外的畫布

function createCanvas(w,h){ 
     var canvas = document.createElement("canvas"); 
     canvas.width = w; 
     canvas.height = h; 
     canvas.ctx = ctx.getContext("2d"); 
     return canvas; 
}

易爲，然後你只是把它當作一個圖像。繪製到另一個畫布

var offScreenCan = createCanvas(1024,1024); 
offScreenCan.ctx.drawImage(myImage); // put something on the canvas 
ctx.drawImage(offScreenCan,0,0); // draw that canvas to another

我將上下文附加到畫布上，而不是將畫布包裹在包含對象中。我曾經擔心畫布會影響性能，現在我將所有圖像轉換爲畫布，只要我加載畫布，並且不會影響性能。

來源

2016-11-04 16:47:55 Blindman67

我最終也使用了這個解決方案，這在性能上似乎很輕。看起來是正確的，儘管爲了這麼簡單的事情需要有第二張畫布，這很讓人傷心。：（不管怎麼說，多謝拉！ – Skeptron

將globalCompositeOperation用於有限數量的圖像

回答

相關問題