Canvas画板橡皮擦功能失效：颜色值更新后绘图未生效求助

问题根源 #

1. 事件冒泡导致颜色被重置：橡皮擦按钮属于.buttons容器的子元素，点击橡皮擦时，会先触发eraser.addEventListener('click')设置颜色，随后事件冒泡到buttons.addEventListener('click')。此时e.path[0]指向橡皮擦按钮，而它没有name属性，color会被赋值为undefined，直接覆盖了之前设置的背景色值。
2. 无法正确获取Canvas背景色：Canvas的背景色是通过CSS类设置的，并非内联样式，canv.style.backgroundColor只能读取内联样式的颜色值，因此得到的是空字符串，无法拿到实际生效的背景色。

修复步骤 #

1. 阻止事件冒泡，避免颜色被覆盖 #

在橡皮擦的点击事件中添加e.stopPropagation()，阻止事件向上冒泡到.buttons容器，确保设置的背景色不会被后续逻辑覆盖：

eraser.addEventListener('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡
  // 使用getComputedStyle获取实际生效的背景色
  const computedStyle = window.getComputedStyle(canv);
  color = computedStyle.backgroundColor;
  console.log(color);
});

2. 优化.buttons点击事件，仅处理颜色按钮 #

修改.buttons的点击事件逻辑，只有当点击的元素是带有name属性的颜色按钮时，才更新color，避免误处理工具按钮：

buttons.addEventListener('click', function(e) {
  const target = e.target;
  // 仅处理带有name属性的颜色按钮
  if (target.hasAttribute('name')) {
    color = target.name;
  }
});

3. 可选：用clearRect实现更高效的橡皮擦 #

如果想要更原生的橡皮擦效果，可以直接使用Canvas的clearRect方法，无需依赖背景色覆盖。需要新增一个标记变量区分绘图和橡皮擦模式：

// 新增全局标记变量
let isErasing = false;

// 修改橡皮擦点击事件
eraser.addEventListener('click', function(e) {
  e.stopPropagation();
  isErasing = true;
  console.log('橡皮擦模式已开启');
});

// 颜色按钮点击时关闭橡皮擦模式
buttons.addEventListener('click', function(e) {
  const target = e.target;
  if (target.hasAttribute('name')) {
    color = target.name;
    isErasing = false;
  }
});

// 修改mousemove事件中的绘图逻辑
canv.addEventListener('mousemove', function(e) {
  if (isMouseDown) {
    const x = e.clientX - 80;
    const y = e.clientY;
    if (isErasing) {
      // 清除指定区域实现橡皮擦效果
      ctx.clearRect(x - 10, y - 10, 20, 20);
    } else {
      ctx.fillStyle = color;
      ctx.strokeStyle = color;
      ctx.lineTo(x, y);
      ctx.lineWidth = 20;
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(x, y);
    }
  } else {
    ctx.beginPath();
  }
});

修改后的完整JavaScript代码 #

const canv = document.getElementById('canvas');
const repeat = document.querySelector('.repeat');
const fill = document.querySelector('.fill');
const eraser = document.querySelector('.erase');
const buttons = document.querySelector('.buttons');
let color;
let isErasing = false;
var ctx = canv.getContext('2d');
var isMouseDown = false;
canv.width = 790;
canv.height = 920;

canv.addEventListener('mousedown', function() {
  isMouseDown = true;
});
canv.addEventListener('mouseup', function() {
  isMouseDown = false;
});

eraser.addEventListener('click', function(e) {
  e.stopPropagation();
  isErasing = true;
  // 如果仍需要用背景色覆盖，注释上面一行，启用下面两行
  // const computedStyle = window.getComputedStyle(canv);
  // color = computedStyle.backgroundColor;
  console.log('橡皮擦模式已开启');
});

buttons.addEventListener('click', function(e) {
  const target = e.target;
  if (target.hasAttribute('name')) {
    color = target.name;
    isErasing = false;
    console.log('当前颜色：', color);
  }
});

fill.addEventListener('click', function() {
  canv.style.backgroundColor = color;
});

canv.addEventListener('mousemove', function(e) {
  if (isMouseDown) {
    const x = e.clientX - 80;
    const y = e.clientY;
    if (isErasing) {
      ctx.clearRect(x - 10, y - 10, 20, 20);
    } else {
      ctx.fillStyle = color;
      ctx.strokeStyle = color;
      ctx.lineTo(x, y);
      ctx.lineWidth = 20;
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(x, y);
    }
  } else {
    ctx.beginPath();
  }
});

内容的提问来源于stack exchange，提问作者Dinosour Arinka