canvas图像擦除及图像修补

要实现 Canvas 图像的擦除和修补功能，你可以使用以下方法：

图像擦：
1. 使用 `globalCompositeOperation` 属性：将 `globalCompositeOperation` 属性设置为 `"destination-out"`，这将使绘制的内容被擦除掉。

   context.globalCompositeOperation = "destination-out";

然后使用鼠标或触摸事件监听器来绘制，这将以擦除的方式删除画布上的内容。

图像修补：
1. 使用保存的原始图像进行修补：在擦除部分之后，将保存的原始图像重新绘制在擦除的位置上。

下面是一个简单的示例代码，演示了如何实现图像的擦除和修补：

<canvas id="myCanvas" width="400" height="400"></canvas>
<button onclick="erase()">擦除</button>
<button onclick="repair()">修补</button>

<script>
  const canvas = document.getElementById("myCanvas");
  const context = canvas.getContext("2d");
  let isErasing = false;
  let backgroundImage = new Image();
  let originalImage = null;

  // 加载背景图像
  backgroundImage.src = "path_to_image.jpg"; // 替换为你的背景图像路径

  backgroundImage.onload = function () {
    context.drawImage(backgroundImage, 0, 0);
    originalImage = context.getImageData(0, 0, canvas.width, canvas.height);
  };

  canvas.addEventListener("mousedown", startDrawing);
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("mouseup", stopDrawing);
  canvas.addEventListener("mouseout", stopDrawing);

  function startDrawing(e) {
    isErasing = true;
    context.beginPath();
    context.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
  }

  function draw(e) {
    if (!isErasing) return;
    context.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
    context.stroke();
  }

  function stopDrawing() {
    isErasing = false;
  }

  function erase() {
    context.globalCompositeOperation = "destination-out";
  }

  function repair() {
    context.globalCompositeOperation = "source-over";
    context.putImageData(originalImage, 0, 0);
  }
</script>

在上述示例中，当你按下鼠标按钮并移动鼠标时会出现擦除效果，松开鼠标按钮后，你可以继续使用画笔进行绘制。要擦除画布上的内容，可以点击 "擦除" 按钮来调用 `erase()` 函数，要修补图像，可以点击 "修补" 按钮来调用 `repair()` 函数。当点击修补按钮时，原始图像会重新绘制在画布上，覆盖掉之前擦除的内容。请注意，`path_to_image.jpg` 需要替换为你的背景图像路径。