本文由 资源共享网 – ziyuan 发布，转载请注明出处，如有问题请联系我们！太阳系教学模拟工具源码

HTML5 Canvas 构建的交互式太阳系教学模拟工具。它通过直观的动画和丰富的交互功能，帮助学习者观察和理解太阳系中行星、卫星、小行星带及彗星的运动规律。以下从功能、交互、视觉设计、模拟细节和技术实现等方面进行详细介绍。

1. 核心功能与教学价值

完整的天体模型

工具包含了太阳、八大行星（水星至海王星）、冥王星（矮行星）、小行星带（约100颗模拟小行星）以及哈雷彗星。部分行星还带有卫星（如地球的月球、火星的火卫一/火卫二、木星的6颗卫星），并模拟了金星、地球、海王星的大气层，木星的条纹，土星和天王星的光环等特征。

可调节的运动速度

通过滑块或键盘（上下箭头）可实时调整全局动画速度（0.1倍至15倍），便于观察不同轨道周期的天体运动快慢。例如，可以放慢速度观察地球与火星的相对运动，或加快速度观察外行星的缓慢移动。

暂停/继续与重置

一键暂停动画，方便定格观察某一时刻的行星位置；重置功能可将所有天体恢复到初始角度，便于反复演示。

轨道显示切换

可显示或隐藏行星轨道线，帮助学习者建立轨道形状和相对距离的概念。小行星带的轨道以极淡的虚线表示，突出其密集分布。

鼠标悬停信息

将鼠标移至任意行星或彗星上，左下角会弹出信息面板，显示天体名称、类型、当前速度、轨道半径（以“AU”天文单位表示）以及简要介绍（如“最靠近太阳的行星”“红色星球”等），将抽象数据与视觉位置关联。

键盘快捷键支持

提供常用快捷键（空格：暂停/开始；R：重置；O：切换轨道；上下箭头：调速；H：隐藏控制面板），方便教师在演示时快速操作。

2. 交互体验与用户界面

控制面板

位于屏幕顶部中央，采用半透明毛玻璃设计，包含“开始/暂停”“重置”“显示/隐藏轨道”三个按钮以及速度调节滑块。面板可隐藏（右上角齿轮按钮），避免遮挡画面。

信息面板

左侧固定区域显示基本操作提示（如快捷键）。鼠标悬停时弹出的行星信息面板位于左下角，背景与风格和控制面板一致，展示所选天体的详细数据。

动态星空背景

由JavaScript生成的数百颗星星组成，部分大星星带有缓慢闪烁的CSS动画，营造深邃太空氛围。

鼠标指示器

鼠标移动时，画布上会显示一个半透明的十字准星，帮助定位当前悬停位置。

3. 视觉设计与天体绘制

太阳

绘制了多层次的日冕光晕和本体渐变，并随机添加光斑（表面纹理），呈现出炽热恒星的视觉效果。

行星细节

使用径向渐变模拟行星的受光照面，颜色根据实际天体特征选取（如地球的蓝色、火星的红色）。

大气层用半透明光晕表示；土星环和天王星环用椭圆渐变填充；木星条纹通过旋转的平行线模拟。

卫星轨道以极淡的灰色圆圈表示，卫星本身也有简单渐变。

哈雷彗星

模拟了椭圆轨道（离心率0.967）和彗尾效果。彗尾由一系列历史位置点构成，绘制时使用透明度递减的线条，形成自然拖尾，并随彗星运动实时更新。

小行星带

在火星与木星之间，用100个随机位置、大小和透明度的小点代表小行星，轨道速度略有差异，形成松散环带。

轨道样式

行星轨道为蓝色虚线，小行星带为极淡灰色实线，避免干扰主体视觉。

4. 模拟与物理特性

轨道运动

每个天体的运动由其baseSpeed和全局速度因子决定。行星轨道接近圆形（除冥王星和彗星设定了离心率），卫星绕行星转动。哈雷彗星轨道为显著椭圆形，且越靠近太阳速度越快（距离因子动态调整）。

相对比例

行星的大小和轨道半径按比例缩放（但为了可视性，大小比例未严格遵循真实比例，轨道半径也做了压缩），使所有天体都能在屏幕上清晰可见。信息面板中轨道半径以“AU”表示，保留教学意义。

时间控制

通过globalSpeedFactor统一调整所有天体及其卫星的运动速度，保证相对运动关系不变。

5. 技术实现亮点

纯前端实现

使用HTML、CSS和原生JavaScript，无需任何外部库，易于部署和修改。

Canvas高效渲染

动画通过requestAnimationFrame驱动，每帧清除画布并重绘所有元素，确保流畅性。对卫星和彗尾的绘制进行了优化。

响应式设计

画布尺寸随窗口变化自适应，太阳始终位于中心；所有坐标计算基于画布宽高。

性能监控

内置FPS检测（控制台输出），当帧率过低时给出提示，便于调试。

触摸支持

添加了触摸事件监听，可在平板或手机上进行基本交互（悬停信息需长按模拟鼠标移动）。

6. 教学适用场景

中小学天文启蒙：通过视觉化的行星运动，帮助学生建立对太阳系结构的直观认识。

大学天文学基础课：可结合速度调节对比内、外行星的运动快慢，讨论开普勒定律（彗星的椭圆轨道）。

科普展览或爱好者自学：交互式操作让学习者自主探索不同天体的特征，如土星环、木星条纹等。

在线演示

http://tt18.cn/tool/school/sun.html