js 实现线条闪烁效果

在JavaScript中实现线条闪烁效果，通常我们会使用HTML的`<canvas>`元素来绘制线条，并利用JavaScript的定时器函数如`setInterval`或`requestAnimationFrame`来周期性地更新线条样式，从而达到闪烁的效果。以下是一个简单的示例代码，展示了如何实现这种效果：

// 获取canvas元素并设置宽度和高度
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 设置线条的初始状态
let isBlinking = true; // 控制线条是否闪烁

// 绘制线条的函数
function drawLine() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 设置线条样式
  ctx.beginPath();
  ctx.moveTo(50, canvas.height / 2);
  ctx.lineTo(canvas.width - 50, canvas.height / 2);
  ctx.strokeStyle = isBlinking ? 'blue' : 'transparent'; // 根据状态设置颜色
  ctx.lineWidth = 10;
  ctx.stroke();
}

// 定时器函数，用于控制线条的闪烁
function blinkLine() {
  isBlinking = !isBlinking; // 切换线条的可见状态
  drawLine(); // 重新绘制线条
}

// 设置定时器，每隔一段时间切换线条状态
setInterval(blinkLine, 500); // 每500毫秒切换一次状态

// 绘制初始线条
drawLine();

在HTML中，你需要添加一个`<canvas>`元素：

<canvas id="canvas" width="800" height="600"></canvas>

这段代码中，`drawLine`函数用于绘制线条，并根据`isBlinking`的值来决定是否显示线条。`blinkLine`函数用于切换`isBlinking`的状态，并调用`drawLine`来重新绘制线条。最后，使用`setInterval`设置定时器，每隔一段时间执行`blinkLine`函数，从而产生闪烁效果。