在画布中创建复合剪辑答案

【问题标题】：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/) 来强制执行我想要的行为，但出于各种原因，我更愿意了解正在发生的事情并做什么如果可能的话，它会更合适。

【问题讨论】：

标签： javascript canvas html5-canvas clip

【解决方案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();

&lt;canvas id="canvas" width=500 height=400&gt;&lt;/canvas&gt;

【讨论】：