缺一不可，漏掉 stroke() 就什么都看不见；因为 moveto() 和 lineto() 仅构建路径指令，不触发绘制，必须显式调用 stroke() 才真正描边显示。
直接说结论：用 moveTo() 定起点、lineTo() 连点、最后调 stroke() 描边——缺一不可，漏掉 stroke() 就什么都看不见。
为什么调了 moveTo() 和 lineTo() 却没画出线？
这是最常踩的坑。Canvas 是「基于状态」的绘图系统：moveTo() 和 lineTo() 只是在内存里构建路径（path），不触发实际绘制。必须显式调用 stroke() 才真正把路径描出来。
- 错误写法：
ctx.moveTo(10, 10); ctx.lineTo(100, 50);→ 页面空白 - 正确写法：
ctx.moveTo(10, 10); ctx.lineTo(100, 50); ctx.stroke(); - 如果之前已调过
stroke()，再画新线前建议加ctx.beginPath();，否则新线会和旧路径连在一起
lineTo() 连续调用时，起点怎么确定？
第一次 lineTo() 的起点，是上一次 moveTo() 的位置；如果没有 moveTo()，就从画布原点 (0, 0) 开始（极少见，容易误判）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 连续画折线可省略中间的
moveTo()：ctx.moveTo(10,10); ctx.lineTo(50,30); ctx.lineTo(90,60); ctx.stroke(); - 但画多条**不相连**的线段时，每条线开头都必须
moveTo()重置起点 - 注意：
lineTo()不会自动清空路径，重复调用会不断延长当前路径
折线颜色/粗细为什么全一样？
因为 strokeStyle 和 lineWidth 是全局状态，一旦设置，后续所有 stroke() 都沿用，直到你再次修改它们。
- 画三条不同颜色的折线，必须在每次
stroke()前分别设ctx.strokeStyle和ctx.lineWidth - 示例中最后一组设置覆盖了前面两组，所以不加控制的话，三条线都会变成蓝色 + 6px
- 更稳妥的做法：每画一条线，先
ctx.beginPath()，再设样式、连点、stroke()
画虚线或带端点的线段要注意什么？
setLineDash() 和 lineCap 等属性也属于上下文状态，影响的是下一次 stroke()，不是 lineTo() 本身。
- 虚线：用
ctx.setLineDash([5, 5])，传空数组[]可恢复实线 - 线头形状：
ctx.lineCap = 'round'（可选'butt'/'square'/'round'） - 这些设置要放在
stroke()之前，且对整条路径生效，不能只作用于某一段
真正容易被忽略的点：Canvas 坐标单位是逻辑像素，但画布显示尺寸由 width/height 属性和 CSS style.width/style.height 共同决定——缩放后线条可能变模糊，这不是绘图逻辑问题，而是渲染分辨率错配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
