Question

我正在设计一个简单的应用程序，我需要使用多个 globalCompositeOperation ，因此我需要使用多个隐藏项目，然后将它们合并以获得最终结果。

其中一个画布项用于 drawImage（），然后将其用作alpha蒙版。

我假设在第二个画布上，如果我用它来绘制第一个画布，它会完全复制它，所以我可以在它上面添加第二个东西。它只复制 fillRect（）并忽略 drawImage（）函数...

任何想法如何将第一个画布的全部内容转发到第二个？我需要蒙面部分移动到第二个画布。

被困在上面几个小时，需要你的帮助。试图使用 toDataUrl（“image / png”），然后将其输出到第二个画布，但获得相同的结果：（

由于

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);
};

合并多个<canvas>问题</canvas>

1 个答案: