canvas画不出线是因为缺少beginpath()、moveto()、lineto()、stroke()中任一环节，它们是路径建模指令而非渲染命令；lineto()仅添加点不渲染，需stroke()才描边；坐标基于当前绘图位置，非画布原点；线条模糊需坐标偏移0.5解决像素对齐问题。
canvas 画不出线？大概率是 moveTo() 和 lineTo() 没配对，或者漏了 beginPath() 或 stroke() —— 它们不是“画线函数”，而是“建模指令”。
为什么调用 lineTo() 后页面没反应
因为 lineTo() 只往当前路径里加一个点，并不渲染。它和 moveTo() 都属于路径构造阶段，就像写剧本但没开拍。
-
beginPath()是清空旧剧本、新建一个空剧本 -
moveTo(x, y)是把“画笔”提起来，挪到 (x, y)，不画线 -
lineTo(x, y)是从当前位置画一条线到 (x, y)，并把当前位置更新为 (x, y) -
stroke()才是真正“开拍”，按当前路径描边
少其中任意一步，线就只存在内存里，不会出现在画布上。
moveTo() 和 lineTo() 坐标到底是相对谁的
起点永远是「当前绘图位置」，不是画布左上角 (0, 0) —— 这个位置由上一次 moveTo()、lineTo() 或 arc() 决定。
- 第一次
lineTo(100, 50)而没调moveTo()，起点默认是 (0, 0) - 连续写
lineTo(50, 50); lineTo(100, 20);，第二条线起点就是 (50, 50) - 想画两条独立线段（比如一横一竖），必须在第二条前显式
moveTo()，否则会连成折线
调试时别猜坐标，直接用 moveTo() 显式设起点，比依赖隐式状态更可靠。
线条模糊或变粗的常见原因
不是代码错，是像素对齐问题：当 lineWidth 是奇数（如 1 或 3），且起点/终点坐标是整数时，浏览器会把线画在两个物理像素中间，触发抗锯齿导致模糊。
- 解决方法：把坐标偏移 0.5，例如
moveTo(50, 50.5)+lineTo(200, 50.5) - 这个偏移只对
stroke()有效；fill()不受影响 - 如果 canvas 元素被 CSS 缩放（比如
style="width:300px; height:150px"但 canvas 的 width/height 是 600×300），还要考虑设备像素比，但那是另一层缩放逻辑
容易被忽略的顺序和重用陷阱
moveTo() 必须在 lineTo() 之前，而且每次画新路径前最好都调 beginPath()。
- 错误写法：
lineTo(100, 50); moveTo(200, 50); lineTo(300, 50);→ 第一条线从 (0, 0) 出发，不是你想要的 - 正确写法：
moveTo(100, 50); lineTo(200, 50); moveTo(200, 50); lineTo(300, 50); - 如果不调
beginPath()就接着画，新线段会追加到上一条路径里，可能意外连接、样式继承混乱
最稳妥的习惯：每画一组独立图形，都以 beginPath() 开头，以 stroke() 或 fill() 结尾 —— 别省那两行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
