Canvas阴影虽无真实光照模型，但通过合理组合shadowOffsetX/Y、shadowBlur、shadowColor及合成模式，可高度还原UI投影层次感：①用偏移+模糊模拟45°顶光；②分层绘制近远双影强化Z轴；③借globalCompositeOperation实现内阴影；④静态预渲染、动态精简参数以平衡性能与沉浸感。

Canvas阴影本身不提供“真实光照模型”，但通过合理组合四个基础属性，能高度还原UI组件常见的投影层次感——关键在于理解偏移、模糊与透明度的协同逻辑，而非堆参数。

用偏移+模糊模拟自然光投射角度

真实界面投影通常来自左上或顶部光源。例如卡片悬停效果：

• shadowOffsetX = -2、shadowOffsetY = -2：模拟顶部45°入射光，阴影落在左上方，增强“浮起”感
• shadowBlur = 8：中等模糊，避免生硬边缘，又保留方向辨识度
• shadowColor = "rgba(0, 0, 0, 0.12)"：低透明度黑，贴近现代设计系统（如Material Design的elevation 2）

分层投影强化Z轴深度

单层阴影容易显得扁平。可对同一元素分两次绘制，制造近远两层投影：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 先设 shadowBlur = 2、shadowOffsetX/Y = 0、shadowColor = "rgba(0,0,0,0.08)"，绘制紧贴底部的“接触阴影”
• 再设 shadowBlur = 12、shadowOffsetX = 0、shadowOffsetY = 6、shadowColor = "rgba(0,0,0,0.06)"，叠加扩散型远影
• 两次绘制之间不重置阴影属性，直接调用 fillRect 或 stroke —— Canvas会自动叠加渲染

内阴影模拟凹陷或按压反馈

Canvas无原生 inner-shadow，但可用合成模式低成本实现：

立即学习“前端免费学习笔记（深入）”；

• 绘制一个稍大的矩形（比如比目标区域宽高各+10px），设置外阴影
• 切换 ctx.globalCompositeOperation = "destination-out"
• 在原位置绘制目标矩形（尺寸完全匹配UI组件可视区）
• 结果：只保留大矩形阴影中“被挖空区域之外”的部分，形成向内收束的暗边效果

性能与沉浸感的平衡要点

高保真投影易拖慢动画帧率，尤其在数据图表或滚动列表中：

• 静态组件（如按钮、卡片）：用离屏Canvas预渲染带阴影的图像，后续用 drawImage 复用
• 动态组件（如滑块拖拽）：关闭 shadowBlur（设为0），仅保留偏移+低透明度色值，视觉仍具立体提示，GPU开销趋近于零
• 避免对整块画布启用阴影——始终在绘制前单独开启，绘制后立即重置为 shadowColor = "transparent" 或清空所有 shadow 属性