在画布中创建复合剪辑

Posted 2023-02-25

【中文标题】在画布中创建复合剪辑

【英文标题】：Creating compound clip in canvas

【发布时间】：2016-10-12 16:56:32

【问题描述】：

我正在尝试路径以创建类似甜甜圈的剪辑路径。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function draw() 
    ctx.save();    

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    ctx.beginPath();

    ctx.arc(200, 200, 30, 0, Math.PI * 2, true);
    ctx.arc(200, 200, 100, 0, Math.PI * 2, true);
    ctx.clip();

    ctx.fillRect(0,0,500,400); 


draw();

正如您在我的 jsfiddle 中看到的，这不起作用：https://jsfiddle.net/nahman/05jcjkvn/

我发现如果我将其更改为使用两种不同的形状类型——圆弧和矩形、圆弧和路径——它可以工作，但我需要能够使用两种相同的形状： https://jsfiddle.net/nahman/9wmvLea7/

我的问题是：

为什么它不适用于两个相同的对象类型，但可以 与不同的？有什么好的资源可以解释这一点吗？ 可悲的是，我的谷歌搜索结果为空......

我该如何解决这个问题？ :)

我应该注意，我目前通过在绘制后绘制较小的剪辑然后应用 clearRect (https://jsfiddle.net/nahman/pg6ya2ob/) 来强制执行我想要的行为，但出于各种原因，我更愿意了解正在发生的事情并做什么如果可能的话，它会更合适。

【参考方案1】：

看看Clip and fill rules的文章

您需要为您的案例指定正确的填充规则“evenodd”。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function draw() 
		ctx.save();    
    
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    
    ctx.beginPath();
    
    ctx.arc(200, 200, 100, 0, Math.PI * 2, true);
    ctx.arc(200, 200, 30, 0, Math.PI * 2, true);
    
    ctx.clip("evenodd");
    ctx.fillRect(0,0,500,400);


draw();

<canvas id="canvas" width=500 height=400></canvas>