HTML Canvas绘制线段与折线教程

本文深入解析HTML Canvas绘制线段与折线的核心机制，直击初学者最常踩的“调了moveTo()和lineTo()却看不见线条”这一痛点——关键在于Canvas的路径构建与实际绘制分离：moveTo()和lineTo()仅在内存中定义路径，必须显式调用stroke()才能真正渲染；同时强调beginPath()重置路径、动态设置strokeStyle/lineWidth控制样式、setLineDash()和lineCap定制虚线与端点，以及易被忽视的逻辑像素与CSS缩放导致的模糊问题，帮你避开陷阱、写出清晰可控的Canvas绘图代码。

直接说结论：用 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) 开始（极少见，容易误判）。

• 连续画折线可省略中间的 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 共同决定——缩放后线条可能变模糊，这不是绘图逻辑问题，而是渲染分辨率错配。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~