HTML Canvas阴影效果设置教程

Canvas阴影效果看似简单却暗藏诸多陷阱：必须在绘制前同时设置shadowColor（不能是默认透明色）和shadowBlur（0或负数无效），且clearRect、save/restore等操作会重置所有阴影属性；drawImage天生不支持阴影，需用filter或离屏canvas迂回实现；阴影偏移受坐标变换影响易错位，大模糊配小图形会导致虚化，动画中shadowBlur宜控制在4–12以保性能——掌握这些关键细节，才能让Canvas阴影真正稳定、高效、可控地呈现。

必须先设 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 渲染上下文的底层行为，和浏览器无关。

• 替代方案一：用 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 缺一不可。

终于介绍完啦！小伙伴们，这篇关于《HTML Canvas阴影效果设置教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！