Canvas需通过context.strokeStyle和lineWidth设置颜色与粗细，SVG则用stroke、stroke-width等属性或CSS类控制；二者均须在绘制前配置且注意fill默认影响。
如果您使用 HTML5 的 Canvas 或 SVG 进行绘图，但发现线条颜色、粗细等参数未按预期显示，则可能是绘图上下文属性未正确设置或 SVG 元素的样式属性缺失。以下是针对 Canvas 和 SVG 两种方式分别设置画笔颜色与粗细的具体操作步骤：
一、Canvas 设置画笔颜色和线条粗细
Canvas 绘图依赖于 2D 渲染上下文（context）对象，所有样式参数均需通过 context 的属性进行配置。颜色由 strokeStyle 控制，线条宽度由 lineWidth 控制，且必须在调用绘制方法（如 stroke()）前完成设置。
1、获取 canvas 元素并调用 getContext('2d') 方法获取绘图上下文。
2、设置 context.strokeStyle = '#ff6b35' 指定描边颜色为橙红色。
立即学习“前端免费学习笔记（深入）”；
3、设置 context.lineWidth = 4 指定线条宽度为 4 像素。
4、使用 beginPath() 开始新路径，moveTo() 定位起点，lineTo() 绘制线段，最后调用 stroke() 实际渲染。
二、Canvas 设置填充颜色与描边颜色分离
Canvas 支持独立控制填充色（fillStyle）与描边色（strokeStyle），当需要绘制实心图形时，必须显式区分二者，否则 fill() 和 stroke() 将使用各自对应的样式值。
1、设置 context.fillStyle = 'rgba(76, 175, 80, 0.6)' 指定填充色为半透明绿色。
2、设置 context.strokeStyle = '#3f51b5' 指定描边色为深蓝色。
3、设置 context.lineWidth = 2.5 指定描边宽度为 2.5 像素。
4、调用 fillRect(x, y, width, height) 填充矩形，再调用 strokeRect(x, y, width, height) 描边同一矩形。
三、SVG 中通过内联属性设置画笔颜色与粗细
SVG 是基于 XML 的矢量图形语言，其图形元素（如 line、rect、circle）可通过原生属性直接定义描边颜色（stroke）和线条宽度（stroke-width），无需 JavaScript 上下文操作。
1、在 <line> 标签中添加 stroke="red" 属性指定线条颜色为红色。
2、添加 stroke-width="3" 属性指定线条粗细为 3 像素。
3、确保同时设置 fill="none" 避免默认填充影响描边视觉效果。
4、完整示例：<line x1="10" y1="10" x2="100" y2="100" stroke="red" stroke-width="3" fill="none"/>。
四、SVG 中通过 CSS 类统一管理绘图样式
SVG 元素支持 CSS 样式控制，可将 stroke 和 stroke-width 等属性提取至 class 中，便于复用与维护，尤其适用于多个图形共享相同画笔参数的场景。
1、在 <style> 标签或外部 CSS 文件中定义类：.pen-thick { stroke: #9c27b0; stroke-width: 5; fill: none; }。
2、在 SVG 元素上添加 class="pen-thick" 属性，例如：<circle cx="50" cy="50" r="20" class="pen-thick"/>。
3、若需动态切换样式，可通过 JavaScript 修改元素的 className 属性值。
五、Canvas 设置线型与端点样式增强表现力
除基础颜色与粗细外，Canvas 还提供 lineCap（线端样式）和 lineJoin（连接点样式）属性，用于控制线条起止形态及拐角外观，提升绘图精度与专业性。
1、设置 context.lineCap = 'round' 使线端呈圆形收尾。
2、设置 context.lineJoin = 'bevel' 在折线连接处使用斜角拼接。
3、设置 context.miterLimit = 2 限制斜接长度，防止尖锐角度过度延伸。
4、上述设置应在 stroke() 调用前完成，且对后续所有描边操作生效，直至被重新赋值。
