HTML网页中如何用canvas标签绘制简单的线条

canvas宽高必须用HTML属性设置，CSS仅拉伸导致模糊；lineTo需配合beginPath、stroke才能绘制；1px线发虚应加0.5像素偏移；lineCap影响端点视觉长度。

canvas 宽高必须用 HTML 属性设置，不能只靠 CSS

很多人写完 <canvas> 标签后直接用 CSS 设置宽高，结果线条模糊、变形或位置偏移。这是因为 canvas 的绘图坐标系由 HTML 属性 width 和 height 决定，CSS 只是拉伸显示区域。比如：

❌ 错误写法：<canvas style="width: 400px; height: 300px"></canvas>

✅ 正确写法：<canvas width="400" height="300"></canvas>

如果后续需响应式，也要同步用 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 行核心代码，但每行背后都有明确作用域和常见陷阱。真正卡住人的往往不是语法，而是坐标对齐、路径管理或渲染精度这类隐性细节。