Question

我尝试在画布中创建复合剪辑路径以创建类似甜甜圈的剪辑路径。

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/）强制我想要的行为，但出于各种原因，我更愿意了解发生了什么如果可能的话，做得更好。

Answer 1

查看Clip and fill rules文章

您需要指定正确的填充规则，＆＃34; evenodd＆＃34;为你的情况。

＆＃13;

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

＆＃13;

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

＆＃13;

在画布中创建复合剪辑

1 个答案: