canvas宽高必须用HTML属性设置，CSS仅拉伸导致模糊；lineTo需配合beginPath、stroke才能绘制；1px线发虚应加0.5像素偏移；lineCap影响端点视觉长度。
canvas 宽高必须用 HTML 属性设置，不能只靠 CSS
很多人写完 标签后直接用 CSS 设置宽高，结果线条模糊、变形或位置偏移。这是因为 canvas 的绘图坐标系由 HTML 属性 width 和 height 决定，CSS 只是拉伸显示区域。比如：
❌ 错误写法：
✅ 正确写法：
如果后续需响应式，也要同步用 JS 动态改 canvas.width / canvas.height，再重绘。
lineTo 不会立刻画线，必须调用 stroke()
moveTo() 和 lineTo() 只是在“规划路径”，不执行绘制。常见错误是写了这两行就以为线出来了，刷新页面却什么都没有。
关键步骤缺一不可：
• ctx.beginPath()（清空旧路径，避免意外连接）
• ctx.moveTo(x1, y1)
• ctx.lineTo(x2, y2)
• ctx.stroke()
漏掉 beginPath() 时，多条线可能被连成一条折线；漏掉 stroke() 就永远不显示。
1px 线条发虚？试试加 0.5 像素偏移
Canvas 默认把 1px 线条画在两个像素中间，导致半透明灰边。尤其在整数坐标上（如 ctx.moveTo(100, 100)）最明显。
解决方法很简单：把 Y（或 X）坐标加 0.5：
• ctx.moveTo(100, 100.5)
• ctx.lineTo(200, 100.5)
这样线条就能精准对齐单个像素栅格。如果用了 lineWidth 为奇数（如 3、5），也建议同样偏移，否则边缘仍可能模糊。
lineCap 和 lineWidth 影响端点视觉效果
默认的 lineCap = "butt" 会让线段在端点处垂直截断，看起来短一截；实际长度仍是数学意义上的两点距离。
可选值：
• "butt"：平头（默认，无延伸）
• "round"：圆头（视觉上更长，半径 = lineWidth / 2）
• "square"：方头（延伸半个线宽）
例如：ctx.lineCap = "round"; ctx.lineWidth = 4; 后，端点会多出 2px 半径的圆弧——这在绘制连续折线或闭合图形时容易让拐角显得臃肿，需要提前预判。
实际绘制一条清晰红线只需 5 行核心代码，但每行背后都有明确作用域和常见陷阱。真正卡住人的往往不是语法，而是坐标对齐、路径管理或渲染精度这类隐性细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
