canvas无原生3d光照，外阴影靠shadow系列属性实现位图合成，内阴影用destination-out“挖”出，光照模拟依赖法向量与光源向量点积，多重发光需多次叠加不同模糊度的阴影。
Canvas 本身不提供真正的三维光照模型，所有“阴影”和“光照”效果都是通过数学模拟与像素级控制实现的视觉欺骗。关键不在渲染引擎，而在你如何组织绘制顺序、计算明暗关系、并合理利用 Canvas 的状态机制。
外阴影：靠四个属性协同生效
Canvas 的标准阴影（shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur）本质是位图合成操作：浏览器先将图形轮廓渲染到临时缓冲区，按偏移和模糊处理后，再叠加到底层画布上。它只对 fill()、stroke()、fillText() 等实际绘制调用起作用，且一旦设置就持续影响后续绘制——除非显式重置。
- 必须设置
shadowColor（非全透明），否则其他参数无效 -
shadowOffsetX/Y = 0且shadowBlur > 0时，产生中心光晕效果，适合按钮高亮或焦点提示 - 负偏移可模拟左上光源，正偏移更接近日常自然光，组合使用能强化立体感
内阴影：用合成模式“挖”出来
Canvas 没有原生内阴影 API，但可通过 globalCompositeOperation = "destination-out" 实现。原理是：先画一个带外阴影的大区域，再在其上用相同形状、但略小的路径“挖掉”中心部分，留下仅在边缘内侧的阴影残留。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 需精确控制两次绘制的尺寸差（通常 2–6px），差值过大会导致阴影断裂，过小则不明显
- 推荐配合
save()/restore()隔离合成模式，避免污染后续绘图 - 此方法不适合动态缩放或抗锯齿要求极高的场景，因边缘可能出现像素级错位
光照模拟：靠法向量与点积算亮度
要让图形（如球体、立方体面）呈现真实明暗过渡，不能只靠单一阴影，而需模拟光源方向与表面朝向的关系。核心是单位法向量与单位光源向量的点积：brightness = max(0, dot(normal, lightDir))。结果直接映射为颜色明度或 alpha 值。
- 平面图形可用固定法向量（如朝上为
[0,0,1]）；曲面需逐点计算（如球面用经纬坐标生成法向） - Isomer 等库已封装该逻辑：自动为每个面生成法线，再与
setLightPosition()定义的光源向量点乘 - 手动实现时，建议用
createRadialGradient()或createLinearGradient()替代逐像素着色，兼顾性能与效果
多重发光：叠加多次低强度阴影
单次 shadowBlur 大了会发虚、小了没张力。真正强烈的霓虹或辉光效果，靠的是多次绘制同一图形，每次用不同 shadowBlur 和透明度组合叠加：
- 典型策略：从大模糊+低透明度开始（扩散基底），逐步过渡到小模糊+高透明度（锐利边缘）
- 3–5 次叠加基本够用，再多性能下降明显，且人眼难以分辨增量
- 注意每次绘制前重设
shadowColor和偏移，避免前序参数干扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
