canvas 重叠部分只清除一层

如果你想在 canvas 上清除一个重叠部分，但是只想清除一个图层，可以使用 `globalCompositeOperation` 属性。该属性定义了在绘制新形状时如何与已有内容进行混合。默认值为 `source-over`，表示新形状将覆盖已有内容。

如果你想只清除一个图层，可以将该图层的 `globalCompositeOperation` 属性设置为 `destination-out`，表示新形状将清除已有内容。同时，需要将 canvas 的 `globalCompositeOperation` 属性设置为 `source-over`，表示新形状将覆盖其他图层。

例如，假设你有两个图层 `layer1` 和 `layer2`，并且它们有重叠部分。如果你想清除 `layer2` 的重叠部分，可以按照以下步骤操作：

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

// 清除 layer2 的重叠部分
ctx.globalCompositeOperation = 'destination-out'; // 设置 layer2 的混合模式为 destination-out
ctx.fillRect(x, y, width, height); // 绘制需要清除的矩形

// 恢复混合模式
ctx.globalCompositeOperation = 'source-over'; // 设置 canvas 的混合模式为 source-over

在上面的代码中，我们首先将 `ctx.globalCompositeOperation` 属性设置为 `destination-out`，然后使用 `fillRect()` 方法绘制需要清除的矩形。由于混合模式是 `destination-out`，所以该矩形将清除 `layer2` 的重叠部分。

最后，我们将 `ctx.globalCompositeOperation` 属性设置回默认值 `source-over`，以便后续绘制不受影响。