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、创建一个<p>元素，不设置内容，仅用于承载线条。 <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。

标签： html5 css javascript java html svg 伪元素 响应式设计 canva