Canvas笔触效果依赖绘制前配置strokeStyle（颜色/渐变/图案）和lineWidth（像素数值），二者须在stroke()前设置且影响后续路径；样式具状态性，需手动重置，调试时优先检查设置顺序与方法匹配。
Canvas 的笔触效果不是靠“画完再改”，而是靠绘制前的精确配置。关键就两个属性：strokeStyle 控制颜色（含透明度、渐变、图案），lineWidth 控制粗细（单位是像素，纯数字）。它们必须在 stroke() 或 fill() 之前设置，且只影响后续绘制路径。
strokeStyle：不只是“填个颜色”
这个属性接受任何合法 CSS 颜色值，包括：
- 十六进制写法：
ctx.strokeStyle = '#ff6b35' - rgb/rgba 写法：
ctx.strokeStyle = 'rgba(255, 107, 53, 0.8)'（支持透明度） - 颜色名称：
ctx.strokeStyle = 'steelblue' - 线性或径向渐变对象（需先用
createLinearGradient()等创建） - 图案（
createPattern()返回的对象）
注意：如果同时使用 fillStyle 和 strokeStyle，它们互不干扰；但若漏设 strokeStyle，默认为黑色，容易误以为没生效。
lineWidth：数值越小越锐利，但有渲染下限
lineWidth 是纯数字，不带单位，最小有效值通常为 0.1，但低于 1 的线条在高 DPI 屏幕上可能发虚或不可见。常见实践：
- 描边轮廓常用
1～3 - 强调线或手绘感可用
4～8 - 避免设为
0（部分浏览器会忽略，或退化为 1px） - 配合
lineCap和lineJoin使用，端点和拐角才自然
组合控制：一次设置，影响整条路径
Canvas 的样式是“状态式”的——一旦设置，就会持续生效，直到被新值覆盖。例如：
- 先设
ctx.lineWidth = 2; ctx.strokeStyle = 'red';，再画三条线，全部是红色细线 - 中途插入
ctx.strokeStyle = 'blue';，之后的线才变蓝 - 每段路径建议配对使用
beginPath()+ 样式设置 +stroke()，避免意外继承
别忘了：beginPath() 不重置样式，只清空当前路径；样式重置必须手动赋新值。
调试小技巧：快速验证是否生效
如果线条没变色或没变粗，优先检查：
- 是否在
stroke()前设置了属性（顺序错=无效） - 是否误用了
fillStyle替代strokeStyle（尤其画空心图形时） - 是否调用了
fill()而非stroke()（前者用fillStyle，后者才用strokeStyle） - 是否启用了抗锯齿（
imageSmoothingEnabled = false）导致边缘模糊，误判粗细
不复杂但容易忽略。
