合併多個<canvas>問題

Question

我正在設計一個簡單的應用程序，我需要使用多個globalCompositeOperation，因此我需要使用多個隱藏項目，然後合併它們以獲得最終結果。

其中一個畫布項用於drawImage（）然後將其用作alpha蒙版。

我認爲在第二個畫布上，如果我用第一個畫布繪製，它會複製它，所以我可以在第二個畫布上添加第二個畫布。我怎麼可以轉發第一畫布第二的全部內容它不會只複製fillRect（）並忽略的drawImage（）函數 ...

任何想法？我需要蒙面部分移動到第二個畫布。

被卡住了幾個小時，需要你的幫助。試圖用toDataUrl（ 「圖像/ PNG」），然後輸出到第二帆布，但得到相同的結果:(

簡化版本下： http://jsfiddle.net/EbVmm/17/

感謝

var c1 = document.getElementById("canvas1"); 
var c2 = document.getElementById("canvas2"); 

function drawScene(mainColour) { 

    var ctx = c1.getContext("2d"); 

    var alphaPath = "http://eskarian.com/images/alpha-test.png"; 
    var alphaObj = new Image(); 
    alphaObj.src = alphaPath; 

    ctx.fillStyle = mainColour; 
    ctx.fillRect(0, 0, 200, 300); 
    ctx.globalCompositeOperation = 'xor'; 
    alphaObj.onload = function() { 
     ctx.drawImage(alphaObj, 0, 0); 
    }; 
}; 

function addScene(colour) { 
    var ctx2 = c2.getContext("2d"); 

    ctx2.drawImage(c1, 0, 0); 
    ctx2.globalCompositeOperation = "source-over"; 
    ctx2.fillStyle = colour; 
    ctx2.fillRect(50, 50, 100, 100); 

}; 

Answer 1

你在完全加載之前試圖使用alphaObj。

嘗試類似這樣：

var c1 = document.getElementById("canvas1"); 
var c2 = document.getElementById("canvas2"); 

var alphaPath = "http://eskarian.com/images/alpha-test.png"; 
var alphaObj = new Image(); 
alphaObj.onload = function() { 
    drawScene(mainColour); 
    addScene(colour) 
}; 
alphaObj.src = alphaPath; 


function drawScene(mainColour) { 
    var ctx = c1.getContext("2d"); 
    ctx.drawImage(alphaObj, 0, 0); 
    ctx.fillStyle = mainColour; 
    ctx.fillRect(0, 0, 200, 300); 
    ctx.globalCompositeOperation = 'xor'; 
}; 

function addScene(colour) { 
    var ctx2 = c2.getContext("2d"); 
    ctx2.drawImage(c1, 0, 0); 
    ctx2.globalCompositeOperation = "source-over"; 
    ctx2.fillStyle = colour; 
    ctx2.fillRect(50, 50, 100, 100); 
};