合並多個 <canvas> 問題

Question

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

畫布項目之一用於drawImage（） ，然后將其用作Alpha蒙版。

我以為如果我在第二張畫布上繪制第一張畫布，它將完全復制它，因此我可以在第二張畫布上添加第二張。 它只復制fillRect（）並忽略drawImage（）函數...

知道如何將第一個畫布的全部內容轉發到第二個嗎？ 我需要將蒙版部分移到第二張畫布。

堅持了幾個小時，需要您的幫助。 嘗試使用toDataUrl（“ image / 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);
};