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* 属性互斥，别同时用）