canvas绘制路径的核心是moveto定起点、lineto连终点，必须配合beginpath初始化路径和stroke/fill渲染才能显示。
Canvas 绘制路径的核心，就是控制“画笔”从哪开始、往哪走、怎么连。moveTo 和 lineTo 是最基础也最关键的两个方法——前者定起点，后者画线段，二者配合才能真正落笔成形。
moveTo：不是画线，是“抬笔移动”
moveTo(x, y) 的作用是把当前绘图位置（即“画笔尖”）移到坐标 (x, y)，它本身不产生任何图形。就像你拿笔在纸上悬空移过去，还没碰到纸面。
- Canvas 初始化或调用 beginPath() 后，起始点默认是左上角 (0, 0)
- 每次想开始一条新线，都该先用 moveTo 定好起点，否则 lineTo 会从前一条路径的终点继续画，容易串连出意外形状
- 在绘制多个独立图形（比如两条不相交的线）时，moveTo 是明确分隔它们的关键
lineTo：连接当前点到目标点
lineTo(x, y) 会在当前画笔位置和指定坐标之间画一条直线。注意：它只定义“下一个落点”，并不立即渲染——真正画出来要靠 stroke() 或 fill()。
- lineTo 总是相对于“当前点”操作，这个当前点要么是 moveTo 设的，要么是上一个 lineTo 的终点
- 一条路径里可以连续调用多次 lineTo，形成折线或多边形轮廓
- 如果最后想闭合图形（比如三角形），可用 closePath() 自动连回起点，比手动 lineTo 更可靠
必须搭配 beginPath 和 stroke/fill 才能看见效果
单独写 moveTo 和 lineTo，页面上什么都不会出现。Canvas 是“状态驱动”的，需要三步闭环：
- 先调 beginPath() 清空旧路径、开启新路径（避免样式污染或意外连接）
- 再用 moveTo + 零个或多个 lineTo（或 arc、bezierCurveTo 等）定义路径形状
- 最后用 stroke() 描边，或 fill() 填充——这才是真正把路径“画出来”的动作
常见误区与实用提醒
新手常踩的坑，往往不在语法，而在 Canvas 的状态管理逻辑：
- 忘记 beginPath()：后一次绘制可能叠加在前一次路径上，导致线条变粗或连错
- 混淆 strokeStyle 和 lineWidth：它们属于上下文状态，一旦设置就持续生效，直到被覆盖；多条线风格不同，记得在每条路径绘制前重设
- 像素对齐问题：当画 1px 线时，若坐标是整数（如 y=50），Canvas 会把线铺在两个像素中间，看起来模糊或变粗；建议用 y=50.5 这类半像素值提升清晰度
