Canvas阴影性能优化需控制shadowBlur在4–12，避免动画中高值；优先用OffscreenCanvas预渲染并缓存；及时重置阴影状态；双端差异需真机调试并针对性微调。

Canvas阴影效果确实能大幅提升视觉层次感，但每一分“高级感”背后都藏着性能代价。关键不是要不要阴影，而是怎么用得聪明。

shadowBlur是性能主因

模糊半径越大，Canvas需要采样和混合的像素范围呈平方级增长。实测显示：shadowBlur从5升到20，单次绘制耗时可能翻3倍以上。尤其在高频重绘场景（如滚动卡片列表、实时图表），这点延迟会累积成明显卡顿。

• 常规UI元素建议控制在4–12之间，多数设计稿中的“柔和阴影”实际对应8–10
• 避免对动画中频繁更新的图形启用高blur值；静态装饰性元素才适合设到15+
• Android平台尤其敏感——setShadowLayer在低版本系统中会触发软件渲染，blur＞10就容易掉帧

离屏Canvas是性价比最高的解法

把带阴影的图形预先画到一个不可见的OffscreenCanvas里，后续只复用这张图，能彻底规避重复计算。这不是“绕开问题”，而是把开销前置、固定化。

• 适合图标、按钮、卡片等复用率高的UI组件
• 生成后可缓存为ImageBitmap（现代浏览器支持），进一步加速drawImage
• 注意尺寸匹配：离屏Canvas宽高需与目标区域一致，否则缩放会劣化阴影质量

别让阴影污染整个绘制流程

Canvas的阴影属性是上下文状态，一旦设置，后续所有fill、stroke、drawImage都会带影子——包括你根本不想加影的线条或文字。这常导致意外叠加和性能浪费。

• 只在真正需要阴影的图形前设置，绘制完立刻重置：ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0
• 用save()/restore()包裹更稳妥，尤其在复杂路径绘制中
• 避免在onDraw或requestAnimationFrame循环里反复设置相同阴影参数，提取为常量复用

移动端要防“影子差”陷阱

iOS Safari和Android Chrome对shadowBlur的实现存在细微差异：同样参数下，iOS边缘更锐利，安卓更弥散。设计师给的“统一阴影值”，在双端可能呈现完全不同的纵深感。

• 真机调试必做，模拟器无法反映真实渲染差异
• 可针对UA做微调：安卓适当减小blur值，iOS略增offsetY补偿视觉下沉感
• 若要求严格一致，放弃原生阴影，改用预渲染PNG或CSS box-shadow叠加层