Canvas阴影需先设shadowColor（如"rgba(0,0,0,0.25)"），再设shadowBlur和shadowOffsetX/Y，顺序不可颠倒；文字、图形均适用，但需在fill()或fillText()前设置，绘制后须手动重置以避免影响后续内容。
Canvas 设置阴影效果的关键不是堆参数，而是让 shadowColor、shadowOffsetX/Y 和 shadowBlur 协同工作——颜色要“真可见”，偏移要“有方向”，模糊要“够柔和但不虚化”。只要顺序对、值合理，图形立刻浮出画布。
先设颜色，再调模糊：顺序不能错
Canvas 阴影默认不可见，因为 shadowColor 默认是 rgba(0,0,0,0)（完全透明），光设偏移和模糊也没用。必须显式设置一个带透明度的颜色：
- ✅ 推荐写法：
ctx.shadowColor = "rgba(0, 0, 0, 0.25)"或"rgba(33, 33, 33, 0.3)"—— 既保证可识别，又不压住主体 - ❌ 避免写法：
"#000"（太生硬）、"transparent"、"#00000000"（等效于全透明） - ⚠️ 注意：必须在
fill()、stroke()或fillText()之前设置；且 先 color，后 blur，否则部分浏览器可能忽略
偏移 + 模糊组合出自然光影
单有模糊只是光晕，加上偏移才产生立体投影感。常用搭配参考：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 模拟顶光（适合标题/按钮）：
shadowOffsetX = 0，shadowOffsetY = 4，shadowBlur = 4–6 - 通用右下角投影（最稳妥）：
shadowOffsetX = 2，shadowOffsetY = 2，shadowBlur = 6 - 轻量悬浮感（如小图标）：
shadowOffsetX = 1，shadowOffsetY = 1，shadowBlur = 3 - 移动端或高 DPR 屏（如 iPhone）：
shadowBlur至少 ≥2，建议起步用 4；blur=1基本不可见
文字与图形都适用，但要注意重置
阴影设置是上下文状态，一旦设了就会持续影响后续所有 fill()、stroke()、fillText()，直到你主动清除：
- 绘制带阴影的矩形或圆形：在
fill()前设置即可 - 给文字加阴影：同样在
fillText()前设置，字体样式（font、textAlign）互不影响 - 想让下一个图形“无阴影”？别只改颜色，推荐完整重置：
ctx.shadowColor = "rgba(0,0,0,0)";ctx.shadowBlur = 0;ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
drawImage 不支持阴影？试试这两个替代方案
ctx.drawImage() 完全绕过阴影管线，设了也无效。需要给图片加阴影时：
- 静态图：用离屏 Canvas —— 先把图片画到一个
offscreenCanvas上，再用ctx.fill()把它当路径填充（走阴影路径） - 动态图或现代浏览器：用 CSS filter：
ctx.filter = "drop-shadow(2px 2px 6px rgba(0,0,0,0.2))";
绘制完记得切回：ctx.filter = "none";（注意：filter 和 shadow* 属性互斥，别同时用）
