js实现划线
使用CSS样式划线
在HTML元素上添加text-decoration: underline样式可以快速实现文字下划线效果。适用于文本元素如<span>或<p>。
<span style="text-decoration: underline;">带下划线的文本</span>通过Canvas绘制自定义划线
使用Canvas API可以灵活控制线条样式（如颜色、粗细、虚线等）：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 50); // 起点坐标
ctx.lineTo(200, 50); // 终点坐标
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.stroke();动态创建DOM元素划线
通过JavaScript动态插入一个<div>作为划线元素，适合在特定位置添加划线：
const line = document.createElement('div');
line.style.width = '100px';
line.style.height = '1px';
line.style.backgroundColor = 'black';
document.body.appendChild(line);SVG实现矢量划线
SVG提供的<line>元素适合绘制可缩放的矢量线条：
<svg width="200" height="10">
<line x1="0" y1="5" x2="200" y2="5" stroke="blue" stroke-width="2"/>
</svg>响应式划线组件
结合CSS伪元素和JavaScript实现交互式划线效果：
.hover-underline:hover::after {
content: '';
display: block;
width: 100%;
height: 2px;
background: currentColor;
}document.querySelector('.hover-underline').addEventListener('click', function() {
this.classList.toggle('active-underline');
});
