shadowBlur不生效是因为未正确设置上下文状态：必须在绘制前设置大于0的shadowBlur和非透明shadowColor，且save/restore、clearRect或canvas重设后需重新配置；drawImage不支持阴影，需用filter替代。
canvas 里 shadowBlur 不生效？检查 context 是否被重置
Canvas 阴影不是 CSS 那套，它依赖 context.shadowBlur、context.shadowColor 等状态属性，且这些设置**只对后续绘制生效**。常见错误是：先画图再设阴影，或在 context.save()/context.restore() 后没重新设置。
-
shadowBlur必须大于 0 才可见（设为 0 或负数 = 无模糊） - 必须同时设置
shadowColor（默认是透明黑"rgba(0,0,0,0)"，看着像没效果） - 如果用了
context.clearRect()或切换了 canvas 大小，shadow*状态不会自动保留，要重设 - 示例：
ctx.shadowColor = "#000";<br>ctx.shadowBlur = 8;<br>ctx.shadowOffsetX = 2;<br>ctx.shadowOffsetY = 2;<br>ctx.fillRect(50, 50, 100, 60); // 只有这句会带阴影
阴影偏移不对？注意 shadowOffsetX/Y 是相对于绘制原点的像素偏移
shadowOffsetX 和 shadowOffsetY 不是“阴影离图形的距离”，而是把阴影整体向右/下（正数）或左/上（负数）平移多少像素。它作用于整个阴影层，和图形形状无关。
- 如果图形用
ctx.translate()移动过，shadowOffset仍按当前坐标系计算，容易误判位置 - 想让阴影始终在图形右下角？确保图形绘制时没额外变换，或手动补偿 offset
- 移动端高 DPR 屏幕下，
shadowBlur=1可能看不见，建议至少从 2 起步 - 避免用大
shadowBlur+ 小图形：边缘会严重虚化甚至“消失”，尤其文字渲染
drawImage 带阴影失效？因为图像绘制不触发 shadow 渲染路径
ctx.drawImage() 默认绕过阴影机制——这是 Canvas 2D API 的设计限制，不是 bug。阴影只对路径类操作（fillRect、fillText、stroke 等）生效，图像绘制走的是位图合成管线。
- 解决办法只有两个：
– 先用ctx.createPattern()或离屏 canvas 把图绘制成路径填充（适合静态图）
– 或用ctx.filter = "drop-shadow(...)";（Chrome/Firefox 支持，但 Safari 旧版不支持，且性能略低） -
filter写法示例：ctx.filter = "drop-shadow(2px 2px 4px rgba(0,0,0,0.3))";<br>ctx.drawImage(img, 0, 0);<br>ctx.filter = "none"; // 记得关掉，否则影响后续绘制
- 注意：
filter是 CSS filter 语法，不支持shadowColor动态变量，也不能和shadowBlur混用
阴影性能差、掉帧？优先砍 blur 值，别在动画里频繁改 shadowColor
Canvas 阴影是实时高斯模糊，shadowBlur 每 +1，计算量非线性上升。尤其在 requestAnimationFrame 循环里反复修改 shadowColor 或 shadowBlur，会强制浏览器重算整个阴影缓存。
立即学习“前端免费学习笔记（深入）”；
- 动画中阴影建议固定
shadowBlur（如始终用 4），只变shadowOffsetX/Y或shadowColor透明度 - 避免在每帧都调用
ctx.shadowColor = `rgba(0,0,0,${alpha})`—— 字符串拼接 + 属性赋值开销不小；可预设几个常用色值变量复用 - 真要动态模糊？考虑用两层 canvas：底层画带阴影的静止元素，顶层画高频动画部分，减少重绘区域
- 移动端尤其注意：iOS Safari 对 >8 的
shadowBlur渲染极慢，实测 12+ 容易卡顿
阴影看着简单，但 canvas 的状态机模型和位图/矢量混合渲染逻辑，让它很容易在换图、缩放、高 DPR、动画这几处突然失灵。最稳的做法是：把阴影当作“一次性装饰属性”，设完立刻绘图，别指望它跨操作持久生效。
