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 属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
