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

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

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

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

1 个答案: