用canvas的stroke()配合动态颜色、模糊阴影和requestanimationframe定时重绘，可实现带呼吸感、多层光晕的逼真霓虹灯效果：通过math.sin控制shadowblur与globalalpha周期变化，叠加三层不同模糊与颜色的描边，并注意shadow设置时机及save/restore状态隔离。
用 Canvas 的 stroke() 配合动态颜色、模糊阴影和定时重绘，就能做出逼真的霓虹灯效果——关键不是“描边本身”，而是如何让描边“呼吸”起来。
用 shadowBlur + 渐变色模拟霓虹辉光
纯色描边没有霓虹感，必须叠加发光。Canvas 本身不支持 CSS 式的多重阴影，但可以用 shadowColor 和 shadowBlur 模拟外发光：
- 先设置高斯模糊值（如
ctx.shadowBlur = 20），越大光晕越扩散 -
shadowColor设为亮色（如"#00f0ff"），再叠加半透明黑底增强对比 - 描边前启用阴影，描边后立即清空（
ctx.shadowBlur = 0），避免污染后续绘制
让霓虹“呼吸”：用 requestAnimationFrame 动态调节亮度与模糊
真实霓虹灯有明暗浮动。不需要复杂算法，只需按正弦波周期调整两个参数：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用
Math.sin(Date.now() * 0.001)生成 [-1, 1] 值，映射为 [0.6, 1.4] 的亮度系数 - 将该系数同时作用于
shadowBlur（如15 * intensity）和globalAlpha（控制整体通透感） - 每次动画帧都清空画布（
clearRect），再重绘路径+描边，形成流畅脉动
路径描边技巧：避开锯齿，强化轮廓清晰度
细路径在高模糊下容易发虚，需手动优化描边质量：
- 路径宽度设为偶数（如
lineWidth = 2或4），避免像素偏移导致毛边 - 开启抗锯齿：
ctx.lineCap = "round"和ctx.lineJoin = "round"，圆角连接更柔和 - 若文字转路径，用
fillText先渲染到离屏 canvas 提取路径，比直接用font更可控
进阶：多层描边叠加不同颜色制造“光晕分层”
单层发光单调，可模仿真实霓虹管的内外光层：
- 先用深色（如
"#004466"）、大模糊（blur=30）描一次底层辉光 - 再用亮色（如
"#00f0ff"）、中等模糊（blur=12）描一次主光 - 最后用纯色（如
"#ffffff"）、blur=0描一次锐利边缘，提升辨识度 - 三层共用同一路径，仅修改 shadow 相关属性和 strokeStyle，性能开销极小
不复杂但容易忽略：所有 shadow 设置必须在 stroke() 调用前生效；动画中务必用 save()/restore() 隔离状态，否则全局 alpha 或阴影会累积污染。完成这些，一个带呼吸感、有层次、不闪烁的网页霓虹灯就跑起来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
