canvas清除重叠部分的非矩形路径

清除 Canvas 上非矩形路径的重叠部分，可以使用 `globalCompositeOperation` 属性和 `clip()` 方法。

首先，我们需要定义一个非矩形路径，比如一个圆形：

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

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.closePath();

接下来，我们可以将画布剪切为该圆形的形状：

ctx.clip();

然后，我们可以使用 `globalCompositeOperation` 属性设置为 `destination-out`，这样绘制的图形将会清除与当前已有内容重叠的部分：

ctx.globalCompositeOperation = 'destination-out';

最后，我们可以使用 `fill()` 方法绘制一个和圆形重叠的路径，这样路径和圆形重叠的部分将会被清除：

ctx.beginPath();
ctx.moveTo(100, 75);
ctx.lineTo(150, 125);
ctx.lineTo(100, 175);
ctx.closePath();
ctx.fill();

完整的代码如下：

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

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.closePath();

ctx.clip();

ctx.globalCompositeOperation = 'destination-out';

ctx.beginPath();
ctx.moveTo(100, 75);
ctx.lineTo(150, 125);
ctx.lineTo(100, 175);
ctx.closePath();
ctx.fill();

运行代码后，你会发现画布上只剩下圆形和路径不重叠的部分了。这样，我们就成功地清除了非矩形路径的重叠部分。