霓虹灯闪烁文字

效果说明

本案例实现了一个霓虹灯效果的文字动画。文字会产生发光效果，并且有轻微的闪烁变化，模拟真实霓虹灯的效果。

核心实现

1. 发光效果实现

使用 Canvas 的阴影属性创建发光效果：

// 设置发光颜色和模糊半径
ctx.shadowColor = neon.glowColor;
ctx.shadowBlur = neon.shadowBlur * intensity;

// 多次绘制增强发光效果
for (let i = 0; i < 3; i++) {
    ctx.fillText(neon.text, x, y);
}

2. 闪烁动画原理

使用正弦函数控制发光强度：

// intensity的值在0.7-1.3之间变化
const intensity = 1 + Math.sin(Date.now() * flickerSpeed) * flickerRange;

闪烁参数说明：

• flickerSpeed: 控制闪烁频率
  • 值越大，闪烁越快
  • 值越小，闪烁越慢
• flickerRange: 控制闪烁幅度
  • 值越大，明暗变化越明显
  • 值越小，明暗变化越平缓

3. 完整配置对象

const neon = {
    text: 'Canvas小技巧',      // 显示的文字
    baseColor: '#fff',        // 文字基础颜色
    glowColor: '#00ff00',     // 发光效果颜色
    shadowBlur: 20,           // 发光模糊半径
    fontSize: 80,             // 字体大小
    flickerSpeed: 0.05,       // 闪烁速度
    flickerRange: 0.3         // 闪烁幅度(0-1)
};

扩展思路

1. 添加多种颜色变化
   • 使用 HSL 颜色实现彩虹渐变
   • 添加颜色过渡动画
2. 实现渐变发光效果
   • 使用径向渐变
   • 创建光晕效果
3. 添加文字描边效果
   • 使用 strokeText
   • 实现双重发光
4. 实现交互式闪烁控制
   • 鼠标控制闪烁频率
   • 点击触发特效

Demo