清除canvas画布内容(点擦除+线擦除)

清除canvas上绘制的内容是一个常见的需求。主要有两种方式可以实现：点擦除和线擦除。

一、点擦除

点擦除是指通过鼠标或手指操作，在canvas上逐点清除绘制内容，实现的效果类似于橡皮擦。

1.1 实现方案

点擦除的实现方案是：在canvas上监听鼠标或手指操作，当检测到鼠标或手指在canvas上移动时，获取当前点坐标，然后将该点坐标周围的像素点的颜色设置为透明，从而实现点擦除的效果。

以下是点擦除的示例代码：

// 获取canvas对象和画布上下文
var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');

// 开始绘制画布内容
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(e) {
  // 获取当前点坐标
  var x = e.offsetX;
  var y = e.offsetY;

  // 将当前点及周围5x5个像素点的颜色设置为透明
  for(var i = -2; i <= 2; i++) {
    for(var j = -2; j <= 2; j++) {
      var px = x + i;
      var py = y + j;
      if(px >= 0 && px < canvas.width && py >= 0 && py < canvas.height) {
        var imgData = ctx.getImageData(px, py, 1, 1);
        imgData.data[3] = 0;
        ctx.putImageData(imgData, px, py);
      }
    }
  }
});

1.2 点擦除的注意事项

点擦除的实现虽然简单，但是需要注意以下几点：

1. 在获取canvas对象时，一定要确保canvas元素已经加载完成，否则会出现获取不到canvas对象的情况。
2. 在设置像素点颜色时，需要使用getImageData和putImageData方法来实现，这两个方法的使用可参考相关文档。
3. 在监听鼠标或手指移动事件时，需要使用offsetX和offsetY属性获取鼠标或手指的坐标，在不同的浏览器中这些属性的名字可能有所不同。

二、线擦除

线擦除是指通过鼠标或手指操作，将canvas上的绘制内容清除，实现的效果类似于橡皮擦划过的痕迹。

2.1 实现方案

线擦除的实现方案是：在canvas上监听鼠标或手指操作，当检测到鼠标或手指在canvas上按下时，记录下当前点坐标，然后监听鼠标或手指在canvas上移动事件，在移动事件中获取当前点坐标，然后使用lineTo方法在两个点之间绘制一条线段，同时使用globalCompositeOperation属性设置为destination-out，从而将线段通过擦除的方式清除canvas上的绘制内容。

以下是线擦除的示例代码：

// 获取canvas对象和画布上下文
var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');

// 开始绘制画布内容
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 监听鼠标按下事件
canvas.addEventListener('mousedown', function(e) {
  // 获取当前点坐标
  var x = e.offsetX;
  var y = e.offsetY;

  // 记录下当前点坐标
  ctx.beginPath();
  ctx.moveTo(x, y);

  // 监听鼠标移动事件
  canvas.addEventListener('mousemove', function(e) {
    // 获取当前点坐标
    var nx = e.offsetX;
    var ny = e.offsetY;

    // 绘制一条线段
    ctx.lineTo(nx, ny);
    ctx.lineWidth = 20;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#fff';
    ctx.globalCompositeOperation = 'destination-out';
    ctx.stroke();

    // 更新点坐标
    x = nx;
    y = ny;
  });
});

// 监听鼠标抬起事件
canvas.addEventListener('mouseup', function() {
  // 移除鼠标移动事件
  canvas.removeEventListener('mousemove');
});

2.2 线擦除的注意事项

线擦除的实现与点擦除有所不同，需要注意以下几点：

1. 在绘制线段时，需要设置线段的宽度、颜色、线帽等属性，在不同的场景中这些属性的取值可能有所不同。
2. 在移除鼠标移动事件时，需要使用canvas.removeEventListener方法，否则会出现无法完成擦除的情况。
3. 使用globalCompositeOperation属性设置为destination-out可以实现通过擦除的方式清除canvas上的绘制内容，但需要注意该属性的取值不同会影响到canvas上的绘制内容。