stroke 不控制粗细只管颜色，真正决定线条粗细的是 linewidth（单位像素，设0时多数浏览器强制为1），需配合 strokestyle 使用；端点和拐角样式由 linecap、linejoin、miterlimit 控制；推荐“路径→样式→绘制”三步闭环。
直接说重点：`stroke` 不控制粗细，只管颜色；真正决定线条粗细的是 `lineWidth`，它必须和 `strokeStyle`（不是 `stroke`）配合使用才有效。
lineWidth 控制粗细，数值即像素宽度
`lineWidth` 是一个纯数字，单位是像素，表示线条中心向两侧延伸的距离（总宽 = 该值）。默认为 1，可设小数如 1.5 或 0.8，高 DPI 屏幕下更细腻。
注意：
• 设为 0 时，多数浏览器会强制渲染为 1 像素，不是“消失”
• 必须在 调用 stroke() 之前 设置，否则对当前绘制无效
• 修改后不会重绘已画内容，只影响后续路径
strokeStyle 设置描边颜色，别误写成 stroke
Canvas 中没有 `stroke` 属性，正确的是 strokeStyle。它接受十六进制、rgb、英文色名等，例如：
• ctx.strokeStyle = '#2a5'
• ctx.strokeStyle = 'rgba(0, 100, 255, 0.7)'
• ctx.strokeStyle = 'darkblue'
常见错误：把 `strokeStyle` 写成 `stroke`，或和 `fillStyle` 混用（尤其画空心图形时）。
线帽与连接处样式需额外设置
仅靠 `lineWidth` 和 `strokeStyle` 还不够，端点和拐角效果由以下属性控制：
• lineCap：端点形状，取值 butt（平头，默认）、round（圆头）、square（方头，比 butt 多出半宽）
• lineJoin：拐角类型，取值 miter（尖角，默认）、round（圆角）、bevel（斜角）
• miterLimit：限制尖角长度，超过则自动降级为 bevel
推荐写法：路径 + 样式 + 绘制三步闭环
避免样式继承干扰，建议每次绘制前显式配置：
• 先调用 beginPath() 清空路径（不重置样式！）
• 再设置 strokeStyle、lineWidth、lineCap 等
• 最后用 stroke() 渲染
示例：
ctx.beginPath();
ctx.strokeStyle = '#e63';
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.moveTo(20, 50);
ctx.lineTo(180, 50);
ctx.stroke();
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
