Canvas API、CSS border、CSS 伪元素、CSS 渐变背景和 SVG line 是五种绘制线条的方法：分别适用于动态交互、静态布局、斜线、响应式及矢量图形场景。
一、使用 Canvas API 绘制线条
Canvas 是 HTML5 提供的位图绘图接口，通过 JavaScript 操作绘图上下文（context）可精确控制线条的起点、终点、颜色、粗细与样式。该方法适用于需要动态生成、交互式或动画化线条的场景。
1、在 HTML 中添加 <canvas></canvas> 元素，并设置其 id 属性和宽高属性。
2、使用 document.getElementById() 获取canva s 元素。
3、调用 getContext('2d') 获取 2D 绘图上下文对象。
立即学习 “ 前端免费学习笔记（深入）”；
4、调用 beginPath() 开始新路径。
5、调用 moveTo(x, y) 设置线条起点坐标。
6、调用 lineTo(x, y) 设置线条终点坐标。
7、设置 strokeStyle 属性为所需颜色，例如ctx.strokeStyle = '#333'。
8、设置 lineWidth 属性指定线条粗细，例如ctx.lineWidth = 2。
9、调用 stroke() 实际绘制线条。
二、使用 CSS border 属性绘制水平或垂直线条
CSS border 通过为块级元素设置单边边框实现线条效果，适合静态布局中分隔区域或装饰性线条，无需 JavaScript 参与，渲染性能高且语义清晰。
1、创建一个 <div> 元素，不设置内容，仅用于承载线条。<p>2、为其设置 <code>width 或height为 0，避免占用额外空间。
3、使用 border-top 绘制水平线，例如border-top: 1px solid #ccc。
4、使用 border-left 绘制垂直线，例如border-left: 2px solid <strong><font color="green">#007bff</font></strong>。
5、若需独立线条不依赖容器，可将元素设为 display: block 并清除内外边距。
三、使用 CSS伪元素 绘制自定义方向线条
通过 ::before 或::after伪元素配合transform: rotate()，可在任意角度绘制线条，适用于斜线、对角分割线等非正交需求。
1、选择目标容器元素，例如一个 <section></section>，并确保其position 为relative。
2、为该元素添加 ::before 伪元素，并设置content: ''。
3、设置伪元素的 position: absolute，并通过top、left 定位起始点。
4、设置 width 和height之一为 0，另一为线条长度，例如width: 100px; height: 1px。
5、应用 background-color 设定线条颜色，例如background-color: <strong><font color="green">#e0e0e0</font></strong>。
6、使用 transform: rotate(45deg) 调整线条角度，旋转中心默认为元素中心点。
四、使用 CSS 渐变背景绘制线条
利用 linear-gradient() 作为 background-image，可在元素上渲染一条极细的色带，本质是背景图像，适合 响应式设计 中保持线条比例一致。
1、创建一个 <div>，设置固定高度（如 <code>height: 1px）或使用padding 预留空间。
2、设置 background-image 为linear-gradient(to right, #666, #666)，起止色相同以形成纯色线。
3、通过 background-size 控制线条宽度，例如background-size: 100% 1px。
4、设置 background-repeat: no-repeat 防止重复渲染。
5、使用 background-position 微调线条垂直位置，例如 background-position: bottom 将其置于容器底部。
五、使用 SVG 的 元素绘制线条
SVG 是基于 XML 的矢量图形标准，<line></line>元素专用于定义两点间直线，支持缩放不失真、原生支持描边属性及事件绑定，适合图标、图表与高精度图形场景。
1、在 HTML 中插入 <svg></svg> 标签，并设定 width 和height属性。
2、在 <svg></svg> 内添加 <line></line> 元素。
3、设置 x1、y1 为起点坐标，x2、y2为终点坐标。
4、设置 stroke 属性指定线条颜色，例如stroke="#28a745"。
5、设置 stroke-width 控制粗细，例如stroke-width="1.5"。
6、可选：添加 stroke-linecap="round" 使端点呈圆角，或 opacity="0.8" 调节透明度。
