Canvas线条宽度由lineWidth控制（单位像素，最小为1），线端样式由lineCap决定（"butt"/"round"/"square"），二者协同影响线段实际渲染范围与视觉效果。
Canvas中线条宽度由lineWidth属性控制，而线端样式则由lineCap决定——两者配合使用才能画出符合预期的轮廓线或装饰线。
lineWidth：设置线条粗细
lineWidth是一个正数，单位是像素，表示线条中心向两侧延伸的距离（即总宽 = lineWidth）。它默认值为1，且不接受CSS单位（如em、rem），只认纯数字。
- 值为0时，实际渲染仍为1像素（浏览器强制最小宽度）
- 值为小数（如1.5）是合法的，尤其在高DPI屏幕下能获得更细腻的描边效果
- 修改后需重新调用
stroke()才会生效，不影响已绘制内容
lineCap：控制线段端点形状
lineCap有三个可选值："butt"（平头）、"round"（圆头）、"square"（方头）。它只影响独立线段（moveTo()→lineTo()）的起点和终点，对闭合路径（closePath()）的连接处无影响。
- "butt"：端点截断在坐标点上，无额外延伸，视觉最“紧凑”
-
"round"：以端点为圆心、
lineWidth/2为半径画半圆，常用于柔和线条 -
"square"：向端点外延伸
lineWidth/2长度，形成方形帽，整体线段看起来比实际坐标长
lineCap与lineWidth的协同表现
方头（"square"）和圆头（"round"）都会让线段“变长”，超出原始路径端点。例如，从(10,50)画到(90,50)，lineWidth=10时：
立即学习“前端免费学习笔记（深入）”；
-
lineCap="butt"：线段严格落在x=10到x=90之间 -
lineCap="round"：左右各多出5像素半圆，实际覆盖x=5到x=95 -
lineCap="square"：左右各多出5像素矩形，同样覆盖x=5到x=95
这个特性在精确对齐、拼接图形或做像素级动画时必须考虑，否则会出现视觉错位。
实用建议
多数UI绘制推荐用lineCap="round"配中等lineWidth（如2~4），视觉更自然；若需硬边切割或对接其他图形边界，优先选"butt"；"square"较少单独使用，但搭配虚线（setLineDash）时可增强端点存在感。
