canvas描边核心参数是linewidth和linecap：linewidth控制线条总宽（单位像素，从中线向两侧延伸），linecap定义端点形状（butt截平、round半圆、square方形），二者协同影响线条实际覆盖范围与视觉对齐效果。
Canvas 中描边样式的核心控制参数就是 lineWidth 和 lineCap，它们分别决定线条“有多粗”和“两端长什么样”，配合使用才能画出精准、美观的线条。
lineWidth：控制线条实际宽度
它是一个纯数字（单位是像素），表示从路径中心向两侧各延伸的距离，即总宽等于该数值。比如设为 8，那线条就是 8 像素宽。
- 默认值是 1，设为 0 时浏览器会自动按 1 渲染
- 支持小数（如 1.5、2.3），在高清屏上能减少锯齿，让边缘更顺滑
- 修改后必须重新调用
stroke()才生效，已画好的内容不会变 - 不仅影响直线，也作用于矩形边框、圆弧、贝塞尔曲线等所有描边路径
- 注意：矩形或圆弧的视觉尺寸会随 lineWidth 增大而“向外撑开”，因为它是从中线向两边画的
lineCap：定义线段端点形状
它只对独立线段（moveTo() → lineTo()）的起点和终点起作用，闭合路径（closePath()）的连接处不受影响。
- butt（默认）：端点截平在坐标位置，不额外延伸，适合精确对齐或拼接图形
-
round：以端点为圆心、
lineWidth / 2为半径画半圆，视觉柔和，UI 绘制常用 -
square：向端点外延伸
lineWidth / 2长度，形成方形帽，整体线段比原始坐标长出一截
举例：从 (10,50) 到 (90,50) 画一条线，lineWidth = 10 时：
– lineCap = "butt" → 实际覆盖 x=10 到 x=90
– lineCap = "round" 或 "square" → 实际覆盖 x=5 到 x=95（左右各多出 5 像素）
lineWidth 和 lineCap 协同的关键细节
端点样式会改变线条的“有效长度”，这点在像素级布局、动画对齐或与其他图形拼接时特别重要。
- 若两个线段端点需严丝合缝对接，优先用
lineCap = "butt" - 想让短线看起来更饱满或缓解硬边感，
lineCap = "round"搭配lineWidth = 2~4效果自然 -
lineCap = "square"单独用较少，但和虚线（setLineDash）搭配时，能让虚线端点更醒目 - 高 DPI 屏幕下，小数 lineWidth + round 端点更容易获得细腻观感
常见误操作提醒
不少初学者画完才发现线条“错位”或“超出预期”，往往是因为忽略了这两个属性的叠加效应。
- 没调用
beginPath()就连续设置不同 lineWidth 并 stroke，会导致前几条线也被重绘成最后设定的宽度 - 以为
lineCap会影响折线中间拐角——其实那是lineJoin的职责 - 给
lineWidth加单位（如 "5px"）或传字符串，Canvas 会静默忽略或转为 0（最终渲染为 1） - 修改了 lineWidth 或 lineCap 后忘记再次 stroke，新样式根本不会显示
