html5添加线条绘制_canvas与CSS绘制线条【详解】

Canvas API、CSS border、CSS伪元素、CSS渐变背景和SVG line是五种绘制线条的方法：分别适用于动态交互、静态布局、斜线、响应式及矢量图形场景。

一、使用Canvas API绘制线条

Canvas是HTML5提供的位图绘图接口，通过JavaScript操作绘图上下文（context）可精确控制线条的起点、终点、颜色、粗细与样式。该方法适用于需要动态生成、交互式或动画化线条的场景。

1、在HTML中添加<canvas></canvas>元素，并设置其id属性和宽高属性。

2、使用document.getElementById()获取canvas元素。

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。

JoinMC智能客服

JoinMC智能客服，帮您熬夜加班，7X24小时全天候智能回复用户消息，自动维护媒体主页，全平台渠道集成管理，电商物流平台一键绑定，让您出海轻松无忧！

193

查看详情

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"调节透明度。