求助：如何在JavaScript的Canvas上通过鼠标事件绘制直线？

嘿，刚接触JavaScript就开始折腾Canvas绘图，真的很棒！我来给你一步步拆解怎么用鼠标事件在Canvas上画直线，再分享几个适合新手的学习方向～

首先，我们需要实现的核心逻辑是：

1. 鼠标按下时记录起点坐标，标记“正在绘制”状态
2. 鼠标移动时，如果处于绘制状态，实时预览从起点到当前鼠标位置的直线
3. 鼠标松开/移出画布时，把这条直线保存下来，结束绘制状态

下面是完整的可运行代码，每一步都加了注释，方便你理解：

<canvas id="drawCanvas" width="800" height="600" style="border: 1px solid #ccc;"></canvas>

<script>
// 获取Canvas元素和2D绘图上下文（所有Canvas绘图都靠这个上下文对象）
const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');

// 状态变量：控制绘制状态，记录起点和当前鼠标位置
let isDrawing = false;
let startX, startY;
let lastX, lastY;

// 存储所有已经画好的直线，方便后续重绘
const drawnLines = [];

// 鼠标按下：开始绘制，记录起点坐标
canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  // 计算鼠标在Canvas内部的相对坐标（避免Canvas在页面中有偏移时坐标不准）
  const canvasRect = canvas.getBoundingClientRect();
  startX = e.clientX - canvasRect.left;
  startY = e.clientY - canvasRect.top;
});

// 鼠标移动：实时预览当前直线
canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return; // 没在绘制状态就直接跳过

  const canvasRect = canvas.getBoundingClientRect();
  lastX = e.clientX - canvasRect.left;
  lastY = e.clientY - canvasRect.top;

  // 先清空画布，然后重绘所有已保存的直线，再画当前预览的直线
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  redrawAllLines();

  // 绘制预览直线
  ctx.beginPath(); // 开始新的路径
  ctx.moveTo(startX, startY); // 移动到起点
  ctx.lineTo(lastX, lastY); // 绘制到当前鼠标位置
  ctx.strokeStyle = '#2196F3'; // 设置线条颜色
  ctx.lineWidth = 2; // 设置线条粗细
  ctx.stroke(); // 执行绘制
});

// 鼠标松开/移出画布：结束绘制，保存当前直线
canvas.addEventListener('mouseup', finishDrawing);
canvas.addEventListener('mouseout', finishDrawing);

// 结束绘制的辅助函数
function finishDrawing() {
  if (!isDrawing) return;

  // 把当前直线的起点和终点保存到数组里
  drawnLines.push({
    x1: startX,
    y1: startY,
    x2: lastX,
    y2: lastY
  });

  isDrawing = false;
  // 最后重绘一次，确保预览线变成永久保存的线条
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  redrawAllLines();
}

// 重绘所有已保存直线的函数
function redrawAllLines() {
  drawnLines.forEach(line => {
    ctx.beginPath();
    ctx.moveTo(line.x1, line.y1);
    ctx.lineTo(line.x2, line.y2);
    ctx.strokeStyle = '#2196F3';
    ctx.lineWidth = 2;
    ctx.stroke();
  });
}
</script>

关键知识点解释： #

• getBoundingClientRect()：用来获取Canvas元素在浏览器视口中的位置，这样计算出来的鼠标坐标才是Canvas内部的相对坐标，不会因为Canvas在页面中的位置偏移而出错。
• drawnLines数组：保存所有画好的直线，每次预览时先清空画布再重绘，这样就能保留之前的绘制内容，不会因为预览新线条而覆盖旧的。
• 鼠标事件组合：mousedown触发开始，mousemove处理实时预览，mouseup和mouseout处理结束，覆盖了所有可能的结束绘制的场景。

作为刚接触JS的新手，先打好基础再进阶Canvas会更顺畅：

• MDN Web Docs：这是前端开发者的“官方手册”，里面的Canvas教程从最基础的绘图命令到复杂动画都有，每个知识点都配了简单的代码示例，非常适合入门。你可以直接搜索相关内容就能找到详细讲解。
• JavaScript基础巩固：Canvas的操作本质是用JS调用API，所以先把变量、函数、事件监听、数组这些基础概念搞懂，比如可以从DOM操作、简单事件处理的练习开始，再过渡到Canvas。
• 小项目练手：从简单的功能扩展开始，比如给上面的代码加“改变线条颜色”“调整线条粗细”“清空画布”的按钮，一步步增加功能，这样能快速加深对Canvas和JS的理解。

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