javascript - 被globalCompositeOperation混淆

我正在尝试编写一个Sierpinski Carpet的前几次迭代的简单演示，如下所示:



我要进行的方法是在每个步骤中单击以较小的比例应用基本图案蒙版。在我看来，通过从一个黑色正方形开始，然后使用“destination-in”的globalCompositeOperation和一个源蒙版，就像第二个图像一样，我应该能够做我想做的事情，但是我一直在努力地把它一起。

这将绘制背景黑色正方形:

context.globalCompositeOperation = "source-over";
context.fillStyle = 'black';
context.fillRect(0, 0, 500, 500);

然后，我期望像下面这样的代码应该产生第一步。但是相反，它只是一片空白。

context.globalCompositeOperation = "destination-in";
var mask = [1, 1, 1, 1, 0, 1, 1, 1, 1];
for (var m = 0; m < 9; ++m)
{
    var x = 10 + m % 3 * 150;
    var y = 10 + Math.floor(m / 3) * 150;
    if (mask[m] > 0)
    {
        context.fillRect(x, y, 150, 150);
    }
}

我在http://jsfiddle.net/128gxxmy/4/上摆了一个小提琴来显示问题。

这似乎确实不是一件困难的事情，所以我显然误解了一些重要的东西，将不胜感激。

谢谢。

编辑:当然可以!我知道为什么空白。第一个填充矩形清除左上角以外的所有内容，下一个填充矩形将其清除。我需要先使用rect(...)，然后使用fill()。如果我重做它以一步一步地绘制每个过程，它应该可以解决问题。

最佳答案

为了完整起见，以防万一其他人陷入同一陷阱，这是相关的代码。我最终使用了一个临时的(不可见的) Canvas ，并用一个填充绘制了整个图层。

function drawLevel(k, fill, mask)
{
    tempContext.save();
    tempContext.clearRect(0, 0, canvas.width, canvas.height);

    // current canvas is destination
    tempContext.drawImage(canvas, 0, 0);
    // set global composite
    tempContext.globalCompositeOperation = "destination-in";

    // draw source
    tempContext.beginPath();

    // how many squares each row
    var n = Math.pow(3, k);

    var size = 450 / n / 3;
    for (var i = 0; i < n; ++i)
        for (var j = 0; j < n; ++j)
        {
            for (var m = 0; m < 9; ++m)
            {
                var x = 10 + i * size + m % 3 * size;
                var y = 10 + j * size + Math.floor(m / 3) * size;
                if (mask[m] > 0)
                {
                    tempContext.rect(x, y, size, size);
                }
            }
        }

    tempContext.fillStyle = fill;
    tempContext.fill();
    tempContext.restore();

    // copy drawing from tempCanvas onto visible canvas
    context.drawImage(tempCanvas, 0, 0);
}

关于javascript - 被globalCompositeOperation混淆，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32983754/