Canvas lineCap属性详解，掌握butt、round、square三种线帽样式的特点和应用场景。lineCap属性决定线条端点的样式，影响开放路径的起始和结束位置外观。
ctx.lineCap = 'butt' | 'round' | 'square'
| 值 | 说明 |
|---|---|
| butt | 平直端点，默认值 |
| round | 半圆形端点 |
| square | 矩形端点 |
// round和square会使线条变长
ctx.lineWidth = 10
ctx.lineCap = 'round' // 两端各增加5像素
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.lineTo(150, 50)
ctx.stroke() // 实际长度160像素
butt：精确控制长度，几何图形
round：柔和外观，手绘风格
square：强调端点，设计感
lineCap只影响开放路径的端点，闭合路径（closePath）不显示端点样式。