使用循环在 HTML5 画布中创建多个剪切路径

Question

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

    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);

    }

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

Answer 1

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

因此移到ctx.clip()for 循环之后，只需要调用一次，并将 移到ctx.beginPath()循环之前。