如何用JavaScript实现一个画图应用_如何捕获鼠标轨迹和绘制图形？

基础画图应用核心是通过mousedown、mousemove、mouseup事件配合Canvas 2D上下文实现路径绘制：按下设isDrawing为true并记录起点，移动时转换坐标并连线，抬起时停止；支持笔、线、矩形、圆等工具切换，并可扩展颜色、粗细、撤销等功能。

用 JavaScript 实现一个基础画图应用，核心在于监听鼠标事件、获取坐标、在 Canvas 上实时绘制路径。关键不是“画什么”，而是“怎么把鼠标的移动变成可视的线条”——这靠 mousedown、mousemove、mouseup 三者配合，再结合 Canvas 的 2D 绘图上下文。

监听鼠标按下和抬起，控制绘制开关

用户只有按住鼠标时才该画画，松开就停止。所以不能一动就画，得先判断是否处于“绘画中”状态。

• 用一个布尔变量（如 isDrawing = false）标记当前是否在绘图
• mousedown 触发时设为 true，并记录起点坐标（用于后续线段起始）
• mouseup 或 mouseout 触发时设为 false，避免鼠标移出画布还继续画

捕获鼠标移动轨迹，实时绘制线段

在 mousemove 中，只要 isDrawing 为真，就从上一个点画到当前点。注意：直接用 clientX/clientY 得到的是页面坐标，需转换为 Canvas 坐标。

• 用 canvas.getBoundingClientRect() 获取画布在视口中的位置
• 计算真实坐标：x = e.clientX - rect.left，y = e.clientY - rect.top
• 调用 ctx.beginPath() → ctx.moveTo(prevX, prevY) → ctx.lineTo(x, y) → ctx.stroke()
• 每次画完更新 prevX 和 prevY 为当前坐标，作为下一段的起点

支持不同图形（直线、矩形、圆形）的简易切换

不只画自由线条，还可扩展为选择工具模式。比如用一个变量 currentTool = 'pen' 控制行为：

标签： javascript java html seo 工具 win 重绘 canva