canvas图像擦除笔及图像修补笔

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

1. 图像擦除笔：
- 设置 `globalCompositeOperation` 属性为 `"destination-out"`，这将使绘制的内容被擦除掉。
- 在鼠标或触摸事件的处理程序中，使用擦除笔的形状和样式进行绘制，以将图像部分擦除。

2. 图像修补笔：
- 设置 `globalCompositeOperation` 属性为 `"source-over"`，这将允许正常绘制。
- 在鼠标或触摸事件的处理程序中，使用修补笔的形状和样式进行绘制，覆盖之前擦除的部分，实现图像的修补。

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

<canvas id="myCanvas" width="400" height="400"></canvas>
<button onclick="setEraser()">擦除笔</button>
<button onclick="setBrush()">修补笔</button>

<script>
  const canvas = document.getElementById("myCanvas");
  const context = canvas.getContext("2d");
  let isDrawing = false;
  let isErasing = false;
  let brushSize = 10;
  let brushColor = "black";

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

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

  function draw(e) {
    if (!isDrawing) return;

    const x = e.clientX - canvas.offsetLeft;
    const y = e.clientY - canvas.offsetTop;

    if (isErasing) {
      context.globalCompositeOperation = "destination-out";
      context.arc(x, y, brushSize / 2, 0, 2 * Math.PI);
      context.fill();
    } else {
      context.globalCompositeOperation = "source-over";
      context.fillStyle = brushColor;
      context.arc(x, y, brushSize / 2, 0, 2 * Math.PI);
      context.fill();
    }
  }

  function stopDrawing() {
    isDrawing = false;
  }

  function setEraser() {
    isErasing = true;
    brushColor = "white";
  }

  function setBrush() {
    isErasing = false;
    brushColor = "black";
  }
</script>

在上述示例中，你可以使用鼠标或触摸事件在 Canvas 上绘制图像。点击 "擦除笔" 按钮将调用 `setEraser()` 函数，设置为图像擦除笔；点击 "修补笔" 按钮将调用 `setBrush()` 函数，设置为图像修补笔。通过调整 `brushSize` 和 `brushColor` 变量，可以更改笔刷的大小和颜色。使用鼠标或触摸事件绘制时，根据当前设置的笔刷类型进行相应的绘制操作。