javascript - 在 Canvas 中使用globalCompositeOperation mask 多个形状

我尝试绘制多个矩形，然后使用globalCompositeOperation'source-in'遮盖效果很好，但是问题是当我填充矩形时，它们消失了...如果我只有一个fill()调用，它们都可以正确绘制但仅尊重最后应用的填充样式。

有问题的代码-

ctx.drawImage(self.glass.mask, 256, 375);
ctx.globalCompositeOperation = 'source-in';

ctx.rect(256, 635, 256, 75);
ctx.fillStyle = "#c65127";

ctx.rect(256, 605, 256, 25);
ctx.fillStyle = "#f5f4f0";

ctx.rect(256, 565, 256, 35);
ctx.fillStyle = "#c65127";

ctx.fill();

上面的代码正常工作。但是，如果我这样做，并取下口罩-

ctx.beginPath();
ctx.rect(0, 256, 256, 75);
ctx.fillStyle = "#c65127";
ctx.fill();

ctx.beginPath();
ctx.rect(0, 226, 256, 25);
ctx.fillStyle = "#f5f4f0";
ctx.fill();

ctx.beginPath();
ctx.rect(0, 186, 256, 35);
ctx.fillStyle = "#222";
ctx.fill();

我有每个矩形，他们尊重自己的填充样式。问题是当我启用 mask 时，它们不再可见。

在globalCompositeOperation'source-in'下可以包含的元素数量是否受到限制，或者我只是缺少一些简单的东西？

这是一些小提琴-

http://jsfiddle.net/ENtXs/-正常工作，但不遵循填充样式。

http://jsfiddle.net/ENtXs/1/-删除 mask 以显示所有元素

http://jsfiddle.net/ENtXs/2/-添加beginPath()和fill()元素会遵循填充样式。 (无 mask )

http://jsfiddle.net/ENtXs/3/-重新添加蒙版(不再显示任何内容)

http://jsfiddle.net/ENtXs/4/-只有一个矩形具有与＃3相同的代码，才能正常工作。

最佳答案

解决了

我认为问题出在globalCompositeOperation的“来源”。我最后要做的是创建一个缓冲 Canvas ，在其上绘制形状，然后获取该图像数据并将其绘制到我的主 Canvas 中，然后将GCO应用于该 Canvas 。

这是一个工作的小提琴-http://jsfiddle.net/ENtXs/5/

有问题的代码:

// Canvas and Buffers
var canvas = document.getElementById('canvas');
var buffer = document.getElementById('buffer');
var ctx = canvas.getContext('2d');
var buffer_ctx = buffer.getContext('2d');

// sizing
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

buffer.height = window.innerHeight;
buffer.width = window.innerWidth;

// mask image
var mask = new Image();
mask.onload = function () {
    drawBuffer();
}

mask.src = 'http://drewdahlman.com/experiments/masking/highball_mask.png';

function drawBuffer() {
    buffer_ctx.beginPath();
    buffer_ctx.rect(0, 256, 256, 75);
    buffer_ctx.fillStyle = "#c65127";
    buffer_ctx.fill();

    buffer_ctx.beginPath();
    buffer_ctx.rect(0, 226, 256, 25);
    buffer_ctx.fillStyle = "#f5f4f0";
    buffer_ctx.fill();

    buffer_ctx.beginPath();
    buffer_ctx.rect(0, 186, 256, 35);
    buffer_ctx.fillStyle = "#222";
    buffer_ctx.fill();

    var image = buffer.toDataURL("image/png");
    var img = new Image();
    img.onload = function(){
        buffer_ctx.clearRect(0,0,buffer.width,buffer.height);
        ctx.drawImage(mask,0,0);
        ctx.globalCompositeOperation = 'source-in';
        ctx.drawImage(img,0,0);
    }
    img.src = image;
}