要让canvas球体有立体感，核心是用createradialgradient模拟光照明暗过渡：通过起始圆（点光源）与结束圆（偏移方向决定光向、半径决定柔度）的空间插值实现高光、亮部、暗部及边缘衰减；颜色停靠点需分三层（高光纯白、主体色降饱和、暗部加深轮廓）；绘制须闭环：创建渐变→添加至少3个色标→赋给fillstyle→path+arc+fill；调试时可用辅助矩形定位两圆，确保arc与结束圆对齐，避免r0==r1且圆心重合致退化为纯色。
要让 Canvas 里的球体看起来有立体感，核心不是“画个圆”，而是用 createRadialGradient 模拟真实光照下的明暗过渡——高光、亮部、暗部、边缘衰减，全靠两个圆的位置与半径关系控制。
关键：两个圆决定光影逻辑
径向渐变不是从一个点发散，而是定义两个圆之间的“空间插值”：浏览器按像素到这两个圆的相对距离比例，混合颜色。所以：
- 起始圆（x0, y0, r0）代表光“来源区域”：r0 = 0 是最常用做法，相当于一个理想点光源，产生清晰高光
- 结束圆（x1, y1, r1）代表光“覆盖范围”：它的圆心偏移方向就是主光源方向，半径大小决定过渡柔和度
- 两圆圆心不重合时，高光会自然偏移——比如左上角高光，就让 (x0, y0) 在 (x1, y1) 左上方
颜色停靠点要分层设计
单靠黑白灰不够，需至少三段控制明暗节奏：
- 位置 0：纯白或浅色，对应高光中心（如
#fff或rgba(255,255,255,0.9)） - 位置 0.5–0.7：主体色，饱和度略降、明度适中（如
#aaa或hsl(0,0%,70%)） - 位置 1：深色或带透明的暗部（如
#333或rgba(0,0,0,0.4)），强化球体轮廓和体积感
绘制步骤必须闭环
漏掉任一环，渐变都不会显示：
- 调用
ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)创建渐变对象 - 用
addColorStop()至少加两个停靠点（推荐 3 个以上） - 把渐变赋给
ctx.fillStyle（不是直接 draw） - 调用
ctx.beginPath() → ctx.arc() → ctx.fill()完成填充
调试技巧很实用
球体看起来“扁”或“变形”，大概率是渐变参数和图形位置没对齐：
- 临时加两行辅助线：
ctx.strokeRect(x0-r0, y0-r0, r0*2, r0*2)和ctx.strokeRect(x1-r1, y1-r1, r1*2, r1*2)，直观看到两个圆实际在哪 - 确保
arc()的圆心坐标和半径，与结束圆（x1, y1, r1）大致匹配——否则渐变区域和图形不重叠 - 避免 r0 == r1 且 (x0,y0) == (x1,y1)，此时退化为纯色，毫无立体感
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
