如何用原生JavaScript实现canvas元素的绘制线条擦除功能？

可以实现，核心是通过Canvas 2D上下文的globalCompositeOperation属性修改绘制合成规则即可。
将该属性设置为destination-out时，新绘制的路径和已有画布内容重叠的区域会被完全清除，变为透明，刚好符合橡皮擦的需求。

修改后的完整代码 #

const canvas = document.createElement("canvas")
const context = canvas.getContext("2d")
// 补充原代码缺失的coords对象定义
const coords = { x: 0, y: 0 }

function reposition(event) {
  coords.x = event.clientX - canvas.getBoundingClientRect().left;
  coords.y = event.clientY - canvas.getBoundingClientRect().top;
  // 原代码中冗余的context.arc语句已删除
}

function draw(event) {
  context.beginPath();
  context.lineWidth = "30";
  context.lineCap = "square";
  // 核心修改：设置合成模式为擦除
  context.globalCompositeOperation = "destination-out";
  context.moveTo(coords.x, coords.y);
  reposition(event);
  context.lineTo(coords.x, coords.y);
  context.stroke();
}

注意事项 #

• 该模式只会擦除你通过Canvas API绘制到画布上的内容，不会影响给Canvas元素设置的CSS背景样式，符合常规橡皮擦的使用预期
• 如果后续需要切回正常绘制模式，在绘制前执行context.globalCompositeOperation = "source-over"即可恢复默认绘制规则

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