javascript - 使用循环在 HTML5 Canvas 中创建多个剪切路径

Question

我无法在 Canvas 中创建多个剪切路径。使用此代码，如果 i=1，我可以使剪切路径正常工作。对于 i>1，我只会在路径重叠时看到裁剪。否则， Canvas 上不会绘制任何内容。

    function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');

        for (var i = 0; i < 5; i++) {
            ctx.beginPath();
            var x = 25 + 25 * i; // x coordinate
            var y = 75; // y coordinate
            var radius = 20; // Arc radius
            var startAngle = 0; // Starting point on circle
            var endAngle = Math.PI * 2; // End point on circle
            var anticlockwise = true; // clockwise or anticlockwise

            ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

            ctx.clip();

        }

       ctx.fillStyle = "#000000";
        ctx.fillRect(0, 0, 800, 150);

    }

如果 Canvas 上不能有多个剪贴蒙版，是否有另一种与剪贴蒙版相同的合成方法？

Answer 1

如果您希望在剪辑区域中有多个形状，您需要定义所有形状然后应用剪辑。如果您在添加每个形状后设置剪辑，您最终只会在前一个剪辑内部进行剪辑。

所以把ctx.clip()移到for循环之后，只需要调用一次，把ctx.beginPath()移到循环之前。