js 横线 实现

在 JavaScript 中实现横线的方法

使用 HTML 标签直接插入横线
可以通过 HTML 的 <hr> 标签直接插入横线。例如：

<hr>

默认样式为一条灰色横线，宽度为 100%。

通过 CSS 自定义横线样式
若需调整横线的颜色、粗细或宽度，可以通过 CSS 实现：

<div style="border-top: 2px solid black; width: 50%; margin: 10px 0;"></div>

• border-top 控制线条样式（如 solid、dashed）。
• width 调整横线长度。
• margin 控制上下间距。

使用 Canvas 动态绘制横线
通过 JavaScript 动态绘制横线，适用于需要交互的场景：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 100);  // 起点坐标
ctx.lineTo(250, 100); // 终点坐标
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.stroke();

通过 Unicode 字符生成横线
使用 Unicode 字符（如 ─ 或 ━）快速生成简单横线：

console.log('────────────'); // 输出连续横线

适用于控制台或文本内容中的简单分隔线。

结合框架（如 React/Vue）的实现
在 React 中，可以封装为组件：

const HorizontalLine = ({ color, thickness }) => (
  <hr style={{ borderColor: color, borderWidth: thickness }} />
);

Vue 中类似，通过 v-bind 动态绑定样式。

根据需求选择合适的方法，HTML/CSS 适合静态页面，Canvas 适合动态效果，框架组件适合复用场景。