Canvas阴影需同时设置shadowColor和shadowBlur且在绘制前完成，否则无效；shadowColor默认透明导致无影；shadowBlur为0或负数无模糊；clearRect等操作会重置阴影属性；drawImage不支持阴影；filter可替代但有兼容性问题；阴影偏移受坐标变换影响；大blur小图形易虚化；动画中应控制shadowBlur在4–12以保性能。
必须先设 shadowColor，再设 shadowBlur，且两者都得在绘制前设置——否则阴影根本不会出现。
为什么设置了 shadowBlur 却没阴影？
最常见原因是 shadowColor 仍是默认的 "rgba(0,0,0,0)"（完全透明黑），看着像没效果。Canvas 阴影不是“开个开关”，而是依赖一组上下文状态，其中 shadowColor 必须是带透明度的合法 CSS 颜色值才可见。
-
shadowBlur设为 0 或负数 = 硬边或无模糊，视觉上接近“没影子” - 如果之前调用过
ctx.clearRect()、ctx.save()/ctx.restore()，或重设了canvas.width/height，所有shadow*属性都会重置，需重新赋值 - 移动端高 DPR 屏幕下，
shadowBlur = 1常常不可见，建议起步值至少为2
drawImage() 不触发阴影？这是设计限制，不是 bug
ctx.drawImage() 绕过 Canvas 的阴影渲染路径，无论你怎么设 shadowBlur 和 shadowColor，它都不会产生阴影。这是 2D 渲染上下文的底层行为，和浏览器无关。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 替代方案一：用
ctx.filter = "drop-shadow(2px 2px 4px rgba(0,0,0,0.3))"，但 Safari 旧版本不支持，且开启后要手动关掉（ctx.filter = "none"），否则影响后续所有绘制 - 替代方案二：把图片先画到离屏
canvas上，再用fill()方式“当图形填进去”，这样能走阴影路径——适合静态图，动态图性能差 - 别混用：
filter和shadow*属性互斥，同时设可能被忽略或行为未定义
阴影偏移总对不上？注意坐标系和变换叠加
shadowOffsetX 和 shadowOffsetY 是相对于当前绘制原点的像素偏移，不是“离图形边缘的距离”。一旦你用了 ctx.translate()、ctx.rotate() 或 ctx.scale()，偏移方向会跟着变，容易误判位置。
立即学习“前端免费学习笔记（深入）”；
- 想让阴影稳定在右下角？确保绘制时没做额外变换；或者手动补偿：比如
ctx.translate(100, 100)后，若还想右下偏移 (2, 2)，就得设shadowOffsetX = 2、shadowOffsetY = 2，而不是 (102, 102) - 大
shadowBlur+ 小图形（尤其是文字）会导致边缘严重虚化甚至“消失”，调试时可先关掉shadowBlur看位置是否正确，再逐步加模糊 - 动画中频繁改
shadowColor或大幅调整shadowBlur会明显掉帧，优先控制shadowBlur在 4–12 范围内
真正容易被忽略的点是：Canvas 阴影没有“继承性”也没有“自动恢复”，每次状态变更（哪怕是清空画布）后，都要当成全新上下文来重设四属性——shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY 缺一不可。
