canvas 清除重叠部分多余路径

如果你想要清除两个或多个路径的重叠部分，可以使用 `globalCompositeOperation` 属性来设置不同的绘制模式。将绘制模式设置为 `destination-out` 可以清除重叠部分。

以下是一个示例代码：

// 获取 canvas 对象和上下文
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制第一个路径
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();

// 绘制第二个路径
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();

// 设置绘制模式为 destination-out
ctx.globalCompositeOperation = "destination-out";

// 绘制第二个路径，重叠部分将被清除
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.fillStyle = "green";
ctx.fill();

在这个示例中，我们先绘制了两个矩形，分别填充为红色和蓝色。接着，我们将绘制模式设置为 `destination-out`，然后再次绘制蓝色矩形。由于绘制模式的影响，重叠部分将被清除，并显示出红色和绿色的非重叠部分。

需要注意的是，设置绘制模式后，后续的绘制操作都会受到影响，因此需要在完成需要清除的路径绘制后，再将绘制模式设置回默认值。