HTML Canvas如何在鼠标移动时绘制无重叠的单条直线

当前代码每次触发mousemove事件时，都会直接在现有画布像素上叠加绘制新线段，再加上设置了globalCompositeOperation = "multiply"混合模式和0.05的低透明度，每一次绘制的临时线段都会永久留在画布上不断叠加，最终出现多条线条重叠、颜色越来越深的效果。
另外原代码存在逻辑遗漏：仅判断了水平位移更大的场景绘制横线，垂直位移更大时没有执行lineTo逻辑，竖线无法正常绘制。

要实现鼠标移动时同步预览、最终仅保留一条无重叠直线的效果，核心是每帧绘制最新预览线前，先擦除上一帧绘制的临时预览内容，常用两种实现方式：

方案1：单画布快照法（轻量场景适用） #

不需要额外新增DOM元素，逻辑简单：

• 鼠标按下触发绘制开始时，通过getImageData保存当前画布的完整像素快照
• 每次mousemove触发时，先通过putImageData恢复之前保存的快照，擦除上一帧的临时预览线，再基于绘制起点和当前鼠标坐标绘制最新的预览直线
• 鼠标抬起结束绘制时，绘制最终确认的直线即可

修正后的参考代码：

let canvasSnapshot = null;
// 鼠标按下：初始化绘制状态、保存画布快照
canvasElement.onmousedown = (e) => {
  started = true;
  prvX = e.offsetX;
  prvY = e.offsetY;
  canvasSnapshot = context.getImageData(0, 0, canvasElement.width, canvasElement.height);
}

canvasElement.onmousemove = (e) => {
  if (!started || !canvasSnapshot) return;
  // 恢复快照，擦除上一帧的临时预览线
  context.putImageData(canvasSnapshot, 0, 0);
  
  // 配置预览阶段绘制参数
  context.beginPath();
  // 预览阶段使用默认混合模式、不透明度，避免效果偏差，最终绘制时再应用需要的混合和透明度参数
  context.globalCompositeOperation = "source-over";
  context.globalAlpha = 1;
  context.lineWidth = size;
  context.strokeStyle = color;
  context.lineJoin = "round";
  context.lineCap = "round";
  context.moveTo(prvX, prvY);
  const dx = e.offsetX - prvX;
  const dy = e.offsetY - prvY;
  // 补全原逻辑遗漏的垂直方向绘制判断
  if (Math.abs(dx) > Math.abs(dy)) {
    context.lineTo(e.offsetX, prvY);
  } else {
    context.lineTo(prvX, e.offsetY);
  }
  context.stroke();
  context.closePath();
};

// 鼠标抬起：完成最终绘制
canvasElement.onmouseup = (e) => {
  if (!started) return;
  started = false;
  // 此处可重新配置multiply混合、0.05透明度等参数，绘制最终确认的直线
  canvasSnapshot = null;
}

方案2：双画布分层法（复杂场景适用） #

性能更好，适合画布上已有大量固定内容、全量重绘性能开销大的场景：

• 叠放两个尺寸完全一致的canvas，下层画布存放所有已绘制完成的固定内容，上层为透明画布专门处理实时预览效果，层级高于下层
• 鼠标移动时仅清空上层透明画布，在上层绘制当前帧的预览直线，不需要重绘下层的固定内容
• 鼠标抬起确认绘制时，把最终直线绘制到下层画布，清空上层画布即可

提示：如果最终线条效果需要保留multiply混合模式和0.05透明度，仅需要在mouseup阶段绘制最终线条时开启这两个配置即可，预览阶段使用默认配置，避免预览效果和最终落地效果不一致。

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