canvas阴影需同时显式设置shadowcolor和shadowblur且顺序为先color后blur；推荐rgba带透明度色值如"rgba(0,0,0,0.25)"，shadowblur建议4–12，搭配shadowoffset实现立体感，drawimage不支持阴影需用离屏canvas或filter替代。
Canvas 阴影要“看得见、控得住、不翻车”，关键不在参数多，而在 shadowColor 和 shadowBlur 的配合是否合理。两者必须同时显式设置、且必须在绘制前完成——缺一不可，顺序也不能错（先 color，后 blur）。
shadowColor：不是设了就行，得“真有色”
默认值是 rgba(0,0,0,0)，看着像黑色，实为完全透明，等于没设。哪怕只写 "#000" 或 "black"，也因 alpha=1 显得太生硬，缺乏真实感。
- 推荐用带透明度的 rgba，例如
"rgba(0, 0, 0, 0.25)"或"rgba(33, 33, 33, 0.3)"，既保证可见，又保留背景层次 - 避免用
"transparent"或末位为00的十六进制色（如"#00000000"），这类写法同样无效 - 若后续图形不想带阴影，别只改 color，建议同步重置
shadowBlur = 0和偏移量，防止误影响
shadowBlur：不是越大越好，得看场景和设备
它控制高斯模糊半径，单位非像素，而是渲染权重值。值为 0 是硬边投影；负数或未设则无模糊；但设了却看不见？大概率是被高 DPR 屏“吃掉”了。
- 移动端/Retina 屏下，
shadowBlur = 1基本不可见，起步建议 ≥2，常用范围是 4–12 - 文字或小图标配大 blur（如 >15）易虚化甚至“消失”，调试时可先关 blur 确认位置，再加模糊
- 动画中频繁变动 blur 值会明显掉帧，固定使用中档值（如 6 或 8）更稳妥
搭配 shadowOffset 实现自然光影感
单独调 color 和 blur 只能出“光晕”，加上 offset 才有立体感。偏移方向受坐标变换影响，容易偏错位置。
- 模拟顶光效果：设
shadowOffsetY = 4，shadowOffsetX = 0，blur 控在 4–6 - 要右下角投影（最常用）：
shadowOffsetX = 2，shadowOffsetY = 2，blur 用 6 更稳 - 用了
ctx.translate()或ctx.scale()后，offset 值仍是相对于当前原点，无需放大，直接填像素值即可
drawImage 不支持阴影？两个靠谱替代法
ctx.drawImage() 绕过阴影管线，无论你怎么设，都不会生效——这不是 bug，是规范行为。
- 静态图可用离屏 canvas：把图片先画到一个
offscreenCanvas上，再用ctx.fill()方式把它当路径填充，就能走阴影路径 - 动态图优先用
ctx.filter = "drop-shadow(2px 2px 6px rgba(0,0,0,0.2))"，Chrome/Firefox 支持好，Safari 15.4+ 起稳定，但记得用完切回"none" - filter 和 shadow* 属性互斥，别同时设，否则行为不确定
