太阳系漫游器：拖拽缩放行星，公转轨道一目了然
记住行星顺序不靠死背，把这颗星转起来自然就记住了。这个工具用 Canvas 实时推演太阳系，行星按真实公转周期差速绕行；拖拽平移、滚轮缩放、点哪颗看哪颗，直径、距太阳距离、公转速度一键弹出。先看成品，再讲怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。
这个工具做什么
它把「太阳系」做成一个可交互的漫游器：
- 实时公转：太阳 + 八大行星按不同角速度绕行，1 秒基础速度约推进 6 个模拟天。
- 真实数据卡位：轨道半径和行星显示半径用幂函数做视觉压缩，远的行星不会挤到屏幕外，小的行星也不会看不见。
- 拖拽平移：按住拖动即可移动视角。
- 滚轮缩放：以鼠标为锚点放大缩小，近看行星细节、远看全太阳系。
- 行星导览：右侧固定列表点击即可聚焦查看任意行星。
- 百科面板：点击行星弹窗显示类型、赤道直径、距太阳距离（百万 km / AU）、公转周期、公转速度和简介。
- 速度控制：暂停 / 播放、加减速，还有对数速度滑块（0.04×~28×）和视图复位。
- 沉浸画面：深空背景 + 闪烁星点 + 太阳光晕脉动 + 土星环 + 轨道线，手机、电脑都适配。
码道开通（免费体验版）
开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：
https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。
进入 AI 开发者空间
- 浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
- 弹窗「请选择要进入的版本」→ 点击 体验版
- 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
- 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建
进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：
打开后码道 WebUI 会先和你打招呼，下方就是需求输入框：
小贴士：体验版沙箱 3 小时后自动重置，生成完记得把
index.html下载保存。
任务描述
在码道 WebUI 输入框粘贴以下需求，回车发送：
开发一个「太阳系漫游器」单文件网页应用：用 Canvas 展示太阳和八大行星，行星按相对比例排列并按不同速度公转；支持拖拽平移、滚轮缩放、点击行星查看名称/直径/距太阳距离等百科信息、加速/减速/暂停，界面沉浸美观，手机和电脑都能用，所有代码写在一个 index.html 里。完成后用部署功能部署成可访问的网页应用，生成一个公网可访问的分享链接，并告诉我访问地址。
这轮码道具体做了什么
不是复述通用 AI 能力，而是它在这次项目里的实际动作：
- 在
/workspace/solar-system下创建单文件index.html，把天体数据、Canvas 绘制、轨道推演、拖拽缩放和信息面板全部写进一个文件，无第三方依赖。 - 探测到空闲端口 3003 后启动
http.server并自检，给出内部预览地址。 - 用 DevBridge 创建公网隧道并验证 HTTP 200，最后给出 8 小时有效的公网分享链接。
代码亮点
以下是 index.html 里值得关注的设计思路和实现细节。
1. 幂函数压缩比例，让八大行星同屏放得下
真实太阳系的轨道半径和直径都差了成千上万倍，直接按真实比例画会什么都看不见。orbitRadius 和 bodyRadius 用幂函数做非线性压缩：
function orbitRadius(au) { return 78 * Math.pow(au, 0.62); }
function bodyRadius(diameterKm) { return 4.2 * Math.pow(diameterKm / EARTH_D, 0.42); }
指数越小压缩越狠：海王星距太阳 30 AU，屏幕半径被压到约 78 * 30^0.62 ≈ 700px，而不是真实比例的几万像素；木星和地球的显示直径差距也被拉近，保证每颗星都看得见。
2. 世界坐标和屏幕坐标互相换算，缩放拖拽都锚在中心
所有行星都先算在「世界坐标」里的位置，再由 worldToScreen 统一映射到屏幕，平移只需改 view.cx / view.cy，缩放只需改 view.scale：
function worldToScreen(wx, wy) {
return {
x: W / 2 + view.cx + wx * view.scale,
y: H / 2 + view.cy + wy * view.scale
};
}
function screenToWorld(sx, sy) {
return {
x: (sx - W / 2 - view.cx) / view.scale,
y: (sy - H / 2 - view.cy) / view.scale
};
}
滚轮缩放时先用 screenToWorld 反推鼠标下的世界点，调整 scale 后再把它映射回屏幕，实现「鼠标指哪，视野缩到哪」。
3. 主循环只加时间，行星位置全由角速度推出
frame 每一帧按真实流逝时间推进 view.time，行星角度用 omega * time + 初始相位 计算，因此暂停、加速、减速都只需要改变时间推进的速度：
function frame(now) {
var dt = now - last; last = now;
if (!view.paused) {
view.time += (dt / 1000) * view.speed * 6;
for (var i = 1; i < BODIES.length; i++) {
BODIES[i].angle = BODIES[i].omega * view.time + BODIES[i]._phase0;
}
}
ctx.fillStyle = "#05070f";
ctx.fillRect(0, 0, W, H);
drawStars(now);
drawOrbits();
drawSun(now);
for (var j = 1; j < BODIES.length; j++) drawPlanet(BODIES[j]);
requestAnimationFrame(frame);
}
行星的角速度 omega = 2π / periodDays，也就是地球 2π / 365 弧度每天，水星环绕得比海王星快得多，轨道节奏一目了然。
4. 点哪颗显示哪颗：命中检测选最近的天体
点击时遍历所有天体，用屏幕距离判断命中，再调 showInfo 渲染百科面板：
function handleClick(sx, sy) {
var hit = null, best = Infinity;
for (var i = 0; i < BODIES.length; i++) {
var b = BODIES[i];
if (b._sx == null) continue;
var d = Math.hypot(sx - b._sx, sy - b._sy);
var tol = Math.max(b._sr + 6, 14);
if (d < tol && d < best) { best = d; hit = b; }
}
if (hit) { selected = hit; showInfo(hit); }
else { selected = null; hideInfo(); }
}
showInfo 再把赤道直径、距太阳距离、公转周期、公转速度等字段拼进表格，太阳则显示表面温度和质量占比。
直接下载试玩
本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：
- Demo Park 仓库：https://atomgit.com/deli007/demo_park
- 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-solar-system-explorer
总结
太阳系漫游器把「天体运动」做成了一个可推演、可交互、可查资料的 Canvas 应用：坐标系统用世界/屏幕两层换算承接平移缩放，模拟时间用单一 view.time 驱动所有行星，比例用幂函数压缩让同屏可见，点击命中再联动百科面板。代码没有图片资源，所有天体颜色、轨道、光晕都是实时绘制。后续可以再接入真实星历数据、加入小行星带和彗星轨道，或给地球加个月球。
如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
- 点赞
- 收藏
- 关注作者
评论（0）