使用Canvas JS绘制线条时旧线条消失，求问题原因及解决方案

问题原因 #

1. 代码在鼠标移动过程中调用了ctx.clearRect(0, 0, convas.width, convas.height)，每次移动都会清空整个画布，导致之前画好的线条被删除。
2. 没有保存已完成的线条数据，清屏后无法恢复之前的绘制内容。

解决办法 #

• 用数组存储所有已完成的线条，每条线条记录起点和终点坐标。
• 鼠标移动时，先清空画布，然后重新绘制数组里所有已保存的线条，再绘制当前正在拖动的临时线条。
• 鼠标松开时，把当前完成的线条存入数组，确保下次绘制时能保留。

修改后的代码 #

const canvas = document.querySelector(".v"); // 修正拼写错误：convas → canvas
const ctx = canvas.getContext("2d");

// 存储所有已完成的线条
const savedLines = [];
// 当前正在绘制的临时线条
let currentLine = null;

function drawLines() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制所有已保存的线条
  savedLines.forEach(line => {
    ctx.beginPath();
    ctx.moveTo(line.start.x, line.start.y);
    ctx.lineTo(line.end.x, line.end.y);
    ctx.stroke();
  });
  
  // 如果有临时线条，绘制它
  if (currentLine) {
    ctx.beginPath();
    ctx.moveTo(currentLine.start.x, currentLine.start.y);
    ctx.lineTo(currentLine.end.x, currentLine.end.y);
    ctx.stroke();
  }
}

canvas.onmousedown = (e) => {
  // 记录当前线条的起点
  currentLine = {
    start: { x: e.offsetX, y: e.offsetY },
    end: { x: e.offsetX, y: e.offsetY }
  };
};

canvas.onmousemove = (e) => {
  if (!currentLine) return;
  // 更新临时线条的终点
  currentLine.end.x = e.offsetX;
  currentLine.end.y = e.offsetY;
  // 重新绘制所有线条
  drawLines();
};

canvas.onmouseup = () => {
  if (currentLine) {
    // 将完成的线条存入数组
    savedLines.push(currentLine);
    currentLine = null;
    // 最后再绘制一次确保状态正确
    drawLines();
  }
};

canvas.onmouseleave = () => {
  // 鼠标移出画布时也结束绘制，避免异常
  canvas.onmouseup();
};

额外说明 #

• 修正了原代码里的拼写错误convas为canvas，避免潜在bug。
• 添加了onmouseleave事件处理，防止鼠标移出画布后仍处于绘制状态。
• 通过分离绘制逻辑到drawLines函数，让代码更清晰易维护。

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