0

我正在设计一个简单的应用程序，我需要使用多个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);

};
4

1 回答 1

0

您正在尝试在 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);
};
于 2013-10-26T18:17:03.187 回答