HTML畫布Blendings針對不同的圖像

Question

我嘗試不同的形象，像層定義不同的混合模式：

var canvas = document.getElementById('canvas'); 

var image1_ctx = canvas.getContext('2d'); 
var image1_obj = new Image(); 
image1_obj.onload = function(){ 
    image1_ctx.drawImage(image1_obj,0,0) ; 
} ; 
image1_obj.src = "../img/one.jpg" ; 

var image2_ctx = canvas.getContext('2d'); 
var image2_obj = new Image(); 
image2_obj.onload = function(){ 
    image2_ctx.drawImage(image2_obj,0,0) ; 
} ; 
image2_obj.src = "../img/two.png" ; 

var image3_ctx = canvas.getContext('2d'); 
var image3_obj = new Image(); 
image3_obj.onload = function(){ 
    image3_ctx.drawImage(image3_obj,0,0) ; 
} ; 
image3_obj.src = "../img/three.jpg" ; 
image3_ctx.globalCompositeOperation = "multiply" ; 

var image4_ctx = canvas.getContext('2d'); 
var image4_obj = new Image(); 
image4_obj.onload = function(){ 
    image4_ctx.drawImage(image4_obj,0,0) ; 
} ; 
image4_obj.src = "../img/four.jpg" ; 
image4_ctx.globalCompositeOperation = "screen" ; 

但「globalCompositeOperation」的最後一個定義的覆蓋befores。 它可能爲每個圖像定義它不同嗎？

Answer 1

每個畫布元素只有1個上下文，因此當您的代碼執行.getContext時，它總是獲取相同的一次性上下文。

如果您想要將不同的globalCompositeOperation s應用於不同的圖像，您必須將每個globalCompositeOperation放在它們的drawImage之前。

但是......

這有可能是你的加載圖像時，所以你可能會想這樣做的合成&繪圖之前預加載所有的圖像，你將有競爭條件。