canvas霓虹文字核心是多层描边发光+呼吸动画：用path2d路径分三层描边（深青蓝/亮青白/纯白），动态调节shadowblur与globalalpha实现呼吸效果，配合纯黑背景、高饱和色及linecap/linejoin圆角提升质感。
用 Canvas 制作霓虹灯光文字，核心不是“画字”，而是让文字边缘“发光、呼吸、分层”。关键靠 shadowBlur + 多层描边 + 动态调节，配合纯黑背景和高饱和色，效果立刻立住。
文字转路径 + 多层描边模拟光晕
直接用 strokeText() 画文字容易模糊失真，推荐先将文字渲染到离屏 canvas 提取路径（或用 Path2D 构造），再在主画布上复用同一路径描三次：
- 底层：深青蓝（如
#004466），shadowBlur = 30，制造宽泛底光 - 中层：亮青白（如
#00f0ff），shadowBlur = 12，作为主发光色 - 顶层：纯白（
#ffffff），shadowBlur = 0，加粗边缘提升清晰度
每次描边前必须设置 ctx.shadowColor 和 ctx.shadowBlur，描完立刻清空：ctx.shadowBlur = 0，避免污染后续绘制。
让霓虹“呼吸”起来
真实霓虹灯有明暗浮动感。用 requestAnimationFrame 每帧更新两个参数：
- 用
Math.sin(Date.now() * 0.001)得到 [-1, 1] 的周期值，映射为 [0.7, 1.3] 的强度系数 - 该系数同时控制：
shadowBlur = 15 * intensity和globalAlpha = intensity * 0.9 - 每帧开头调用
ctx.clearRect(0, 0, canvas.width, canvas.height)清空，再重绘三层路径
细节决定质感
很多效果发灰、发虚，往往卡在几个易忽略点：
- 背景必须是纯黑（
#000）或近似深灰（#0a0a0a），浅色背景会让光晕变脏 - 发光色选高饱和、带青/紫倾向的，比如
#00f0ff、#b000ff，避开低饱和灰蓝（如#aaa） - 描边宽度设为偶数（
lineWidth = 2或4），开启圆角：ctx.lineCap = "round"、ctx.lineJoin = "round" - 动画中务必用
ctx.save()/ctx.restore()隔离阴影与透明度状态，否则会累积漂移
替代方案：CSS filter 更轻量（适合静态文字）
如果只是展示标题类文字，不用 Canvas 也能高效实现：
- 用
text-shadow叠加多层不同半径、颜色的阴影：text-shadow: 0 0 5px #0ff, 0 0 15px #0ff, 0 0 30px #0066cc, 0 0 60px #000088; - 背景同为纯黑，字体选无衬线体（如
"Arial", sans-serif），加font-weight: bold强化轮廓 - 慎用
filter: blur()单独叠加——它会软化整体，削弱霓虹的锐利感
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
