0

複数のglobalCompositeOperationを使用する必要がある単純なアプリを設計しているため、複数の非表示アイテムを使用し、それらをマージして最終結果を得る必要があります。

キャンバス アイテムの 1 つはdrawImage()に使用され、アルファ マスクとして使用されます。

2番目のキャンバスで1番目のキャンバスを描画するために使用すると、それが正確にコピーされるため、2番目のものをその上に追加できると想定しました。fillRect()のみをコピーし、 drawImage()関数を無視します...

最初のキャンバスのコンテンツ全体を2番目に転送するにはどうすればよいですか? 2 番目のキャンバスに移動するには、マスクされた部分が必要です。

何時間も立ち往生していて、あなたの助けが必要です。toDataUrl("image/png")を使用してから、それを2番目のキャンバスに出力しようとしましたが、同じ結果が得られました:(

簡易版: 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 に答える