Canvas 2D API 无法真正渲染三维球体，因其无内置3D变换、深度缓冲或光照模型；但可通过球面参数方程生成顶点、法向量计算光照、正交/透视投影及渐变或逐像素着色模拟动态光影效果。
直接用 Canvas 2D API 无法真正渲染三维球体——它本质是二维绘图上下文，没有内置的 3D 变换、深度缓冲或光照模型。但你可以用数学+像素级控制“模拟”出带动态光影的三维球体视觉效果，关键在于：用 球面参数方程生成顶点，用 法向量计算光照强度，再用 渐变填充或逐像素着色模拟明暗过渡。
1. 基础球面建模与投影
不依赖 WebGL，纯 Canvas 实现需手动将三维球面点映射到二维画布：
- 用球坐标系生成表面点：
(x, y, z) = (r·sinφ·cosθ, r·sinφ·sinθ, r·cosφ)，其中 φ ∈ [0, π]，θ ∈ [0, 2π] - 做正交投影（忽略 z 深度）：直接取 (x, y) 作为画布坐标；若要透视感，可用
x' = x / (d - z)类似公式缩放 - 把所有点按 z 值排序（从远到近），确保遮挡关系正确（画家算法）
2. 动态光源与光照计算
光照效果靠法向量与光源方向的点积（Lambert 漫反射模型）：
- 球面上任一点法向量即归一化后的该点坐标（球心在原点时）
- 设光源方向向量为
lightDir = normalize([lx, ly, lz])，则亮度系数diffuse = max(0, dot(normal, lightDir)) - 让光源随时间移动（如绕球旋转）：
lx = cos(t), lz = sin(t)，t 每帧递增，就能实现动态光影流转
3. 渲染策略：渐变 vs 像素操作
两种主流做法，各适合不同需求：
立即学习“前端免费学习笔记（深入）”；
-
径向渐变填充：用
createRadialGradient模拟高光+阴影过渡，性能高、代码简洁，适合静态视角或轻量应用 -
ImageData 逐像素着色：用
getImageData获取像素数组，对每个 (x,y) 反推对应球面点，计算法向量和光照值，再写入 RGBA 值——能实现精确 Phong 高光、环境光遮蔽等，但性能开销大，需 requestAnimationFrame 节流
4. 优化与增强真实感
纯 Canvas 球体容易显得“平”，可通过这些技巧提升质感：
- 添加环境光（ambient）避免纯黑阴影：
finalColor = ambient + diffuse × diffuseColor - 用二次贝塞尔曲线或阴影模糊模拟柔和边缘，避免生硬轮廓
- 叠加轻微噪声纹理或使用 HSV 色彩空间调整饱和度/明度，增强表面细节感
- 鼠标拖拽更新光源位置，或用 DeviceOrientation API 接入手机陀螺仪，实现交互式光影响应
如果需要真正可旋转、带材质、支持多光源的三维球体，应转向 WebGL（如 Three.js 封装），Canvas 方案本质是“视觉欺骗”，但足够轻量、零依赖、易于调试，适合教学演示或极简风格项目。
