Canvas发光效果需先设非透明shadowColor再设shadowBlur（4–12），绘制前重置；单层不足时用多重叠加（不同blur与颜色分层绘制）；配合lighter模式累加亮度，但drawImage不支持阴影，需用离屏canvas或径向渐变替代。
Canvas 实现发光效果，核心是 shadowBlur + shadowColor 的正确组合，再配合 lighter 混合模式 可显著增强光晕强度和层次感——这不是“加个滤镜”那么简单，而是要理解渲染顺序、状态重置和混合逻辑。
发光效果的基础：shadowBlur 必须配对 shadowColor
单独设 shadowBlur 没用。Canvas 阴影是上下文状态，必须同时设置：
-
先设
shadowColor（不能是默认透明色rgba(0,0,0,0)） -
再设
shadowBlur（推荐 4–12，动画中避免突变） - 两者都得在 绘制命令之前 设置，比如
fillText()或fill()前 -
clearRect()、canvas.width = ...或save()/restore()会清空阴影状态，需重新赋值
单层阴影不够亮？试试多重叠加
一个 shadowBlur=20 看起来发虚，强度弱；一个 shadowBlur=5 又太硬、没扩散。解决办法是多次绘制同一图形，每次用不同模糊值：
- 第一次：浅色+小 blur（如
rgba(255,255,0,0.6)+blur=8）→ 定基础光晕 - 第二次：同色或渐变色+中 blur（如
rgba(255,200,0,0.4)+blur=16）→ 扩展范围 - 第三次：高饱和色+大 blur（如
rgba(255,100,180,0.2)+blur=32）→ 强化边缘辉光 - 每次绘制前重设
shadowColor和shadowBlur，无需清空画布
lighter 混合模式让光“叠亮不压暗”
普通绘制是覆盖式，而 ctx.globalCompositeOperation = 'lighter' 让像素值相加，特别适合叠加发光：
- 开启后，多次绘制同一区域会自动提亮，比单纯调高 alpha 更自然
- 常用于霓虹笔效果：先用
lighter绘制带阴影的路径，再切换回source-over画主体 - 注意：开启后所有后续绘制都会叠加，记得及时恢复
ctx.globalCompositeOperation = 'source-over' - 搭配
shadowBlur使用时，lighter能把多层阴影的亮度真正“累加”出来，不是简单叠图层
避坑提醒：drawImage 不走阴影路径
想给图片加发光？drawImage() 完全忽略 shadow* 设置——这是 Canvas 2D 规范限制，不是 bug：
- 替代方案一：用
ctx.filter = "drop-shadow(...)";（需手动关掉，且 Safari 旧版不支持） - 替代方案二：把图片画到离屏 canvas，再用
ctx.drawImage(offscreencanvas, ...)→ 不行；正确做法是把离屏 canvas 当作图像源，用ctx.fillStyle = ctx.createPattern(offscreencanvas, 'no-repeat')，再fillRect()→ 这样能触发阴影 - 更稳妥的做法：用
createRadialGradient模拟光晕，绕过阴影机制
