canvas实现星系效果的核心是模拟中心引力、轨道运动与视觉层次；需用requestanimationframe保证帧率稳定，每次清屏防拖影，分层维护角度与速度，缓存画布尺寸，用sin/cos转极坐标，统一弧度单位，半径可加随机扰动，自转用save/restore隔离，按背景→星云→恒星→行星→光晕顺序绘制，星云用径向渐变与lighter叠加，恒星亮度按距离平方衰减，行星差异化配色与描边，各层运动节奏错开以增强真实感。
Canvas 做星系效果，核心不是画“一堆星星”，而是模拟**中心引力+轨道运动+视觉层次**。直接用 arc() 画几百个圆点，只会得到静态星空，不是星系。
为什么 requestAnimationFrame 比 setInterval 更适合星系旋转
星系动画需要稳定帧率来维持角速度感和轨道平滑性。setInterval 容易因 JS 主线程阻塞而丢帧，导致旋转卡顿或跳变；requestAnimationFrame 则与屏幕刷新率同步，且在页面不可见时自动暂停，省资源。
- 必须在每次回调开头调用
ctx.clearRect(0, 0, canvas.width, canvas.height)，否则轨迹会拖影 - 若星系含多层旋转（如恒星自转 + 行星公转 + 星云慢速旋臂），每层应独立维护自己的
angle和speed，避免耦合计算 - 别在动画循环里重复调用
canvas.width/canvas.height获取尺寸——缓存为变量，减少属性读取开销
Math.sin() 和 Math.cos() 是轨道坐标的刚需
星系中天体绕中心运动，本质是极坐标转笛卡尔坐标：x = cx + r * Math.cos(angle)，y = cy + r * Math.sin(angle)。硬编码 for 循环移动坐标，既难调速也不符合物理直觉。
- 角度单位必须统一用弧度，别混用
degree * Math.PI / 180和直接写0.01 - 半径
r可设为固定值（圆形轨道），也可叠加随机扰动（r * (0.95 + Math.random() * 0.1)）模拟椭圆轨道 - 如果某颗行星还要自转，额外加一个
spinAngle，用ctx.save()/ctx.restore()包裹其局部变换，避免污染全局状态
星系分层绘制顺序不能错：背景 → 星云 → 恒星 → 行星 → 光晕
Canvas 是立即模式绘图，没有 z-index。绘制顺序即视觉层级。星云需半透明叠加，恒星要带高斯模糊感（用多次小半径 arc() + 低 globalAlpha 模拟），行星则常需描边+填充双色表现明暗面。
- 星云建议用
ctx.createRadialGradient()绘制，中心透明、边缘淡白，再用globalCompositeOperation = 'lighter'叠加多次增强辉光 - 恒星亮度建议按
1 / (distanceFromCenter ** 2)衰减，比线性衰减更接近真实光学效果 - 别给所有行星用相同
fillStyle——木星用棕红渐变，土星加环状遮罩（用clip()截取环形路径），否则失去辨识度
真正难的不是画出旋转，而是让不同层级的运动节奏错开：星云转得最慢（周期几秒），恒星微颤（毫秒级抖动），行星公转速度按距离中心远近自然变化。这些细微差异，才是星系感的来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
