canvas 清除指定路径不影响其他有重叠的路径

要清除 canvas 中指定路径而不影响其他有重叠的路径，可以使用以下步骤：

1. 获取 canvas 元素以及上下文对象：

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

2. 使用 beginPath() 方法开始新的路径：

ctx.beginPath();

3. 使用 moveTo() 方法移动笔触到路径起点：

ctx.moveTo(x, y);

其中，x 和 y 分别为路径的起点坐标。

4. 使用 lineTo() 方法绘制路径：

ctx.lineTo(x, y);

其中，x 和 y 分别为路径的终点坐标。

5. 使用 stroke() 方法绘制路径：

ctx.stroke();

6. 使用 save() 方法保存当前画布状态：

ctx.save();

7. 使用 clip() 方法裁剪当前画布区域为指定路径：

ctx.clip();

8. 使用 clearRect() 方法清除指定路径：

ctx.clearRect(x, y, width, height);

其中，x 和 y 分别为要清除路径的左上角坐标，width 和 height 分别为要清除路径的宽度和高度。

9. 使用 restore() 方法恢复之前保存的画布状态：

ctx.restore();

例如，要清除 canvas 中位置为 (10, 10) 到 (50, 50) 的路径而不影响其他有重叠的路径，可以这样写：

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(50, 50);
ctx.stroke();
ctx.save();
ctx.clip();
ctx.clearRect(10, 10, 40, 40);
ctx.restore();