太阳系运行模拟程序-html动画
太阳系运行模拟程序-html动画
by AI:
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交互式太阳系模拟器</title><style>body {margin: 0;overflow: hidden;background-color: #000;font-family: Arial, sans-serif;color: white;}canvas {display: block;}#info {position: absolute;top: 10px;left: 10px;background-color: rgba(0, 0, 0, 0.7);padding: 10px;border-radius: 5px;max-width: 300px;}#controls {position: absolute;bottom: 10px;left: 10px;background-color: rgba(0, 0, 0, 0.7);padding: 10px;border-radius: 5px;}button {background-color: #333;color: white;border: 1px solid #555;padding: 5px 10px;margin: 5px;cursor: pointer;}button:hover {background-color: #444;}#planet-info {position: absolute;right: 10px;top: 10px;background-color: rgba(0, 0, 0, 0.7);padding: 10px;border-radius: 5px;width: 250px;display: none;}</style>
</head>
<body><canvas id="solarSystem"></canvas><div id="info"><h2>太阳系模拟器</h2><p>鼠标拖动可以旋转视角</p><p>滚轮可以缩放</p><p>点击行星查看详细信息</p></div><div id="controls"><button id="speedUp">加速</button><button id="speedDown">减速</button><button id="pause">暂停/继续</button><button id="realScale">真实比例</button><button id="viewScale">可视比例</button></div><div id="planet-info"><h2 id="planet-name">行星名称</h2><p id="planet-desc">描述信息...</p><p>直径: <span id="planet-diameter"></span></p><p>与太阳距离: <span id="planet-distance"></span></p><p>轨道周期: <span id="planet-period"></span></p></div><script>// 初始化画布const canvas = document.getElementById('solarSystem');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 行星数据const planets = [{ name: "太阳", radius: 30, distance: 0, color: "#FDB813", speed: 0, desc: "太阳系的中心恒星", diameter: "1,392,700 km", orbitalPeriod: "" },{ name: "水星", radius: 5, distance: 60, color: "#A9A9A9", speed: 0.04, desc: "最靠近太阳的行星", diameter: "4,880 km", orbitalPeriod: "88 地球日" },{ name: "金星", radius: 9, distance: 90, color: "#E6E6FA", speed: 0.015, desc: "最热的行星，逆向自转", diameter: "12,104 km", orbitalPeriod: "225 地球日" },{ name: "地球", radius: 10, distance: 130, color: "#6B93D6", speed: 0.01, desc: "我们美丽的家园", diameter: "12,742 km", orbitalPeriod: "365.25 地球日", moons: [{ radius: 3, distance: 20, speed: 0.05 }] },{ name: "火星", radius: 7, distance: 180, color: "#C1440E", speed: 0.008, desc: "红色行星，可能有生命", diameter: "6,779 km", orbitalPeriod: "687 地球日", moons: [{ radius: 2, distance: 15, speed: 0.03 }, { radius: 1, distance: 25, speed: 0.02 }] },{ name: "木星", radius: 22, distance: 250, color: "#E3DCCB", speed: 0.002, desc: "太阳系最大的行星", diameter: "139,820 km", orbitalPeriod: "12 地球年", moons: Array(4).fill().map((_, i) => ({ radius: 3 + Math.random(), distance: 30 + i * 10, speed: 0.01 + Math.random() * 0.02 })) },{ name: "土星", radius: 19, distance: 320, color: "#F7EC9E", speed: 0.001, desc: "拥有美丽光环的气态巨行星", diameter: "116,460 km", orbitalPeriod: "29.5 地球年", rings: { inner: 25, outer: 40 }, moons: Array(7).fill().map((_, i) => ({ radius: 2 + Math.random(), distance: 25 + i * 8, speed: 0.01 + Math.random() * 0.02 })) },{ name: "天王星", radius: 15, distance: 380, color: "#D1E7E7", speed: 0.0007, desc: "侧向自转的冰巨星", diameter: "50,724 km", orbitalPeriod: "84 地球年", moons: Array(5).fill().map((_, i) => ({ radius: 2 + Math.random(), distance: 20 + i * 7, speed: 0.01 + Math.random() * 0.02 })) },{ name: "海王星", radius: 14, distance: 440, color: "#5B5DDF", speed: 0.0005, desc: "太阳系最外围的行星", diameter: "49,244 km", orbitalPeriod: "165 地球年", moons: Array(2).fill().map((_, i) => ({ radius: 2 + Math.random(), distance: 20 + i * 10, speed: 0.01 + Math.random() * 0.02 })) }];// 模拟状态let state = {time: 0,speed: 1,paused: false,scale: "view", // "view" or "real"rotationX: 0,rotationY: 0,zoom: 1,lastX: 0,lastY: 0,dragging: false,selectedPlanet: null};// 事件监听canvas.addEventListener('mousedown', (e) => {state.dragging = true;state.lastX = e.clientX;state.lastY = e.clientY;});canvas.addEventListener('mousemove', (e) => {if (state.dragging) {state.rotationY += (e.clientX - state.lastX) * 0.01;state.rotationX += (e.clientY - state.lastY) * 0.01;state.lastX = e.clientX;state.lastY = e.clientY;}});canvas.addEventListener('mouseup', () => {state.dragging = false;});canvas.addEventListener('wheel', (e) => {state.zoom -= e.deltaY * 0.001;state.zoom = Math.max(0.1, Math.min(2, state.zoom));});canvas.addEventListener('click', (e) => {const rect = canvas.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;// 检查是否点击了行星const clickedPlanet = checkPlanetClick(x, y);if (clickedPlanet) {state.selectedPlanet = clickedPlanet;showPlanetInfo(clickedPlanet);} else {state.selectedPlanet = null;document.getElementById('planet-info').style.display = 'none';}});// 控制按钮document.getElementById('speedUp').addEventListener('click', () => {state.speed *= 1.5;});document.getElementById('speedDown').addEventListener('click', () => {state.speed /= 1.5;});document.getElementById('pause').addEventListener('click', () => {state.paused = !state.paused;});document.getElementById('realScale').addEventListener('click', () => {state.scale = "real";});document.getElementById('viewScale').addEventListener('click', () => {state.scale = "view";});// 检查行星点击function checkPlanetClick(x, y) {const centerX = canvas.width / 2;const centerY = canvas.height / 2;for (let i = planets.length - 1; i >= 0; i--) {const planet = planets[i];const scaleFactor = state.scale === "real" ? 0.1 : 1;// 计算行星位置const angle = state.time * planet.speed;const planetX = centerX + Math.cos(angle) * planet.distance * state.zoom;const planetY = centerY + Math.sin(angle) * planet.distance * state.zoom * 0.5;// 考虑旋转const rotatedX = centerX + (planetX - centerX) * Math.cos(state.rotationY) - (planetY - centerY) * Math.sin(state.rotationY);const rotatedY = centerY + (planetX - centerX) * Math.sin(state.rotationY) + (planetY - centerY) * Math.cos(state.rotationY);// 检查点击const distance = Math.sqrt(Math.pow(x - rotatedX, 2) + Math.pow(y - rotatedY, 2));if (distance < planet.radius * state.zoom * scaleFactor) {return planet;}}return null;}// 显示行星信息function showPlanetInfo(planet) {const infoPanel = document.getElementById('planet-info');document.getElementById('planet-name').textContent = planet.name;document.getElementById('planet-desc').textContent = planet.desc;document.getElementById('planet-diameter').textContent = planet.diameter;document.getElementById('planet-distance').textContent = `${(planet.distance / 10).toFixed(1)} 天文单位`;document.getElementById('planet-period').textContent = planet.orbitalPeriod;infoPanel.style.display = 'block';}// 动画循环function animate() {if (!state.paused) {state.time += 0.01 * state.speed;}// 清除画布ctx.fillStyle = 'black';ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制星空背景drawStars();const centerX = canvas.width / 2;const centerY = canvas.height / 2;const scaleFactor = state.scale === "real" ? 0.1 : 1;// 绘制行星planets.forEach(planet => {const angle = state.time * planet.speed;const planetX = centerX + Math.cos(angle) * planet.distance * state.zoom;const planetY = centerY + Math.sin(angle) * planet.distance * state.zoom * 0.5;// 应用旋转const rotatedX = centerX + (planetX - centerX) * Math.cos(state.rotationY) - (planetY - centerY) * Math.sin(state.rotationY);const rotatedY = centerY + (planetX - centerX) * Math.sin(state.rotationY) + (planetY - centerY) * Math.cos(state.rotationY);// 绘制轨道ctx.beginPath();ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';ctx.ellipse(centerX, centerY, planet.distance * state.zoom, planet.distance * state.zoom * 0.5, 0, 0, Math.PI * 2);ctx.stroke();// 绘制行星ctx.save();ctx.translate(rotatedX, rotatedY);ctx.rotate(state.rotationX);// 如果是土星，绘制光环if (planet.name === "土星" && planet.rings) {ctx.beginPath();ctx.strokeStyle = 'rgba(210, 180, 140, 0.7)';ctx.lineWidth = 3;ctx.ellipse(0, 0, planet.rings.outer * scaleFactor * state.zoom, planet.rings.outer * scaleFactor * state.zoom * 0.3, 0, 0, Math.PI * 2);ctx.stroke();ctx.beginPath();ctx.strokeStyle = 'rgba(210, 180, 140, 0.4)';ctx.lineWidth = 5;ctx.ellipse(0, 0, planet.rings.inner * scaleFactor * state.zoom, planet.rings.inner * scaleFactor * state.zoom * 0.3, 0, 0, Math.PI * 2);ctx.stroke();}// 绘制行星主体const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, planet.radius * scaleFactor * state.zoom);gradient.addColorStop(0, planet.color);gradient.addColorStop(1, darkenColor(planet.color, 0.5));ctx.beginPath();ctx.fillStyle = gradient;ctx.arc(0, 0, planet.radius * scaleFactor * state.zoom, 0, Math.PI * 2);ctx.fill();// 如果是选中的行星，添加高亮if (state.selectedPlanet === planet) {ctx.beginPath();ctx.strokeStyle = 'white';ctx.lineWidth = 2;ctx.arc(0, 0, planet.radius * scaleFactor * state.zoom + 5, 0, Math.PI * 2);ctx.stroke();}// 绘制卫星if (planet.moons) {planet.moons.forEach(moon => {const moonAngle = state.time * moon.speed;const moonX = Math.cos(moonAngle) * moon.distance * scaleFactor * state.zoom;const moonY = Math.sin(moonAngle) * moon.distance * scaleFactor * state.zoom * 0.5;ctx.beginPath();ctx.fillStyle = 'lightgray';ctx.arc(moonX, moonY, moon.radius * scaleFactor * state.zoom, 0, Math.PI * 2);ctx.fill();});}ctx.restore();});requestAnimationFrame(animate);}// 绘制星空背景function drawStars() {for (let i = 0; i < 500; i++) {if (!window.stars) {window.stars = Array(500).fill().map(() => ({x: Math.random() * canvas.width,y: Math.random() * canvas.height,size: Math.random() * 1.5,opacity: Math.random()}));}const star = window.stars[i];ctx.beginPath();ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);ctx.fill();}}// 颜色变暗函数function darkenColor(color, amount) {const num = parseInt(color.replace("#", ""), 16);let r = (num >> 16) * (1 - amount);let g = ((num >> 8) & 0xFFFF) * (1 - amount);let b = (num & 0xFFFF) * (1 - amount);return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;}// 窗口大小调整window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;window.stars = null; // 重置星星位置});// 开始动画animate();</script>
</body>
</html>相关文章：
太阳系运行模拟程序-html动画
太阳系运行模拟程序-html动画 by AI: <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>交互式太阳系…...
【C++ Qt】容器类（GroupBox、TabWidget）内附思维导图 通俗易懂
每日激励：“不设限和自我肯定的心态：I can do all things。 — Stephen Curry” ✍️绪论： 本章主要介绍了 Qt 中 QGroupBox 与 QTabWidget 控件。QGroupBox 是带标题的分组框，能容纳其他控件，有标题、对齐方式、是否…...
SOC-ESP32S3部分：18-串口
飞书文档https://x509p6c8to.feishu.cn/wiki/NqrMw6X8Si6sSqkyPbxcFRxGnid UART全称是通用异步接收器/发送器，ESP32-S3 芯片有 3 个 UART 控制器。每个 UART 控制器可以独立配置波特率、数据位长度、位顺序、停止位位数、奇偶校验位等参数。 串口文档参考…...
CSS 样式表的四种应用方式及css注释的应用小结
CSS样式表的四种应用方式及注释应用小结 一、样式表应用方式 内联样式（行内样式） <div style"color: #ff0000; font-size: 16px;">示例文本</div>特点：直接写在HTML标签的style属性中优先级：最高ÿ…...
五、web安全--XSS漏洞（2）--XSS相关payload
XSS 主要是针对网页客户端的一种攻击，那么就要执行 JavaScript 代码，那么无疑需要用到 JavaScript 语言以及在 HTML 中可以解析 JavaScript 代码的标签。 1、标签类 （1）script <script></script>标签是最直接的 xS…...
AI架构师的新工具箱：ChatGPT、Copilot、AutoML、模型服务平台
AI架构师不仅要懂架构、懂AI服务，还需要具备使用AI工具提升工作效率的能力。新一代AI工具已经成为架构师不可或缺的“工具箱”，帮助他们更高效地进行设计、部署、编码与优化。 以下介绍几类代表性工具，并说明它们在实际架构工作中的应用场景。 一、ChatGPT：生成架构设计文…...
关于智能体接入后端，在Apifox能够传参数给智能体的测试
from flask import Flask, request, jsonify, render_template import requests import json # 用于解析嵌套的 JSON 字符串app Flask(__name__)COZE_BOT_ID 7508736911423963162 COZE_API_KEY pat_cHXqrFzcvtktfmmlp4pjF3O2qmjioQW46uU8UNbUugyvSlFZclklpunc53DbR8ws COZE…...
有铜半孔工艺的制造难点与工艺优化
技术难点剖析 有铜半孔工艺在制造过程中面临多重挑战，主要集中在材料加工精度、孔壁完整性及良率控制三个方面： 铜层翘起与毛刺残留 半孔成型时，铣刀高速切割可能导致孔壁铜层被拉扯，产生翘起或残留铜屑，影响导电性能…...
python分步合并处理excel数据
文章目录 概要整体架构流程技术名词解释技术细节小结概要 客户需求 1. 背景与目标 用户需要将三个包含农业实验数据的Excel表格（AK、AN、AP）合并为一个结构化数据集，用于后续分析。每个表格包含相同类型的字段（如对照组与PSB处理组的样本数、均值、标准差），但需通过字…...
MC0309魔法项链
思路： 以数位贡献的思路来写这题， 统计每一位上为 1 的个数： 对于第 k 位，统计有多少个数在这一位上为 1，记作 cnts[k] 枚举每个数，逐位分析它对整体的贡献（即与其它数交互时的和）…...
为 Ubuntu 安装的软件创建桌面图标
如何为 Ubuntu 安装的软件创建桌面图标（.desktop 启动器） 在 Ubuntu 或其他 Linux 发行版中，我们常常通过压缩包（如 .tar.gz）或官方二进制方式安装软件。这种安装方式虽然灵活方便，但默认并不会将软件添加…...
uni-app 中开发问题汇总
uni-app 中 echarts 中的点击事件失效？ 在 main.js 中 设置 window.wx{}，这个方式，如果需要调 wx 中的方法会失效（如果默认后续不会调 wx 中的方法推荐使用） 降低版本，安装一个低版本的，比如&a…...
https下git拉取gitlab仓库源码
git init 创建仓库 参考下面创建公私秘钥对 注意不要以root用户身份创建公私钥，确保保存在/home/username GitLab配置ssh key - 阿豪聊干货 - 博客园 Your identification has been saved in /home/xxx/.ssh/id_ed25519 Your public key has been saved in /ho…...
距离计算范围查找距离排序
一 使用场景 目前基于某个位置查附近的人，附近的商家等等，查出来的结果添加距离，或者查附近多大范围内的人或者商家，然后按距离排序已经是IT界一个很通用的功能了。 二 距离计算搜索(百万点集以下) 2.1 球的定义 2.2 两点之…...
PS linux 基础篇1-AXI_DMA
系列文章目录 文章目录 系列文章目录前言一、AXI DMA ip核二、BD工程三、PS linux工程1.使用开源的xilinx_axidma-master工程验证驱动2.按照其他的开源进行就行，没什么写的了 前言 PL与PS之间快速的接口，本文为LOOP回环测试 一、AXI DMA ip核 MM2S mem…...
AI大模型学习三十、ubuntu安装comfyui,安装插件，修改返回405 bug，值得一看喔
一、说明 ComfyUI是一个开源的、基于节点的Web应用。它允许用户根据一系列文本提示（Prompt）生成图像。 ComfyUI使用扩散模型作为基础模型，并结合 ControlNet、Lora和LCM低阶自适应等模型，每个工具都由程序中的一个节点表示 二、开…...
11高可用与容错
一、Broker 高可用架构设计 1.1 RabbitMQ 镜像集群方案 集群搭建步骤 # 节点1初始化 rabbitmq-server -detached rabbitmq-plugins enable rabbitmq_management# 节点2加入集群 rabbitmqctl stop_app rabbitmqctl join_cluster rabbitnode1 rabbitmqctl start_app# 创建镜像…...
百度之星2024 初赛第一场 补给
百度之星2024 初赛第一场 补给 题干描述问题分析：C代码Java代码：Python代码补充说明： 题干描述 参考自马蹄集OJ，原文链接1 可怕的战争发生了，小度作为后勤保障工作人员，也要为了保卫国家而努力。 现在有 …...
Collection集合遍历的三种方法
1.foreach循环遍历 格式：for（元素的数据类型 变量名：数组或集合）{ } 2.使用迭代器遍历 方法名称：Iterator<E> iterator（） 说明：返回集合中的迭代器对象，该迭代…...
Taro on Harmony C-API 版本正式开源
Taro 是由京东发起并维护的开放式跨端跨框架解决方案，支持以 Web 的开发范式来实现小程序、H5、原生 APP 的跨端统一开发，从 18 年开源至今，在 GitHub 已累计获得 36,000 Stars。 Taro x 纯血鸿蒙 在过去的一年中，Taro 经历了显…...
知识隔离的视觉-语言-动作模型：训练更快、运行更快、泛化更好
25年5月来自PI的论文“Knowledge Insulating Vision-Language-Action Models: Train Fast, Run Fast, Generalize Better”。 视觉-语言-动作 (VLA) 模型通过将端到端学习与来自网络规模视觉-语言模型 (VLM) 训练的语义知识迁移相结合，为机器人等物理系统训练控制策…...
[ARM][架构] 02.AArch32 程序状态
目录 参考资料 1.程序状态 - PSTATE 2.用户模式的 PSTATE 信息 2.1.状态标志 2.2.溢出/饱和标志 2.3.大于等于标志 2.4.指令集状态 2.5.IT 块状态 2.6.端序控制 2.7.指令执行时间控制 3.用户模式访问 PSTATE - APSR 寄存器 4.系统模式的 PSTATE 信息 4.1.状态标志…...
Dockerfile正确写法之现代容器化构建的最佳实践
前言 在容器化的世界里，Dockerfile是构建镜像的核心，但你真的确定自己写的Dockerfile是最佳实践吗？根据我多年的容器化经验，大多数开发者编写的Dockerfile存在效率低下、安全隐患和维护困难等问题。本文将分享现代容器化环境中Dockerfile的正确编写方式，帮助你构建更高效…...
React---day4
3、React脚手架 生成的脚手架的目录结构 什么是PWA PWA全称Progressive Web App，即渐进式WEB应用；一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用；随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线…...
ArkUI（方舟UI框架）介绍
ArkUI（方舟UI框架）介绍 构建快速入门 使用ArkWeb构建页面...
【Bug】定时任务中 Jpa Save 方法失效
【Bug】定时任务中 Jpa Save 方法失效 首先说一下问题，在定时任务中调用 jpa 的 save 方法没有效果，但是通过外界调用，比如 controller 中注入 service 来调用是可以的，真是巨巨巨离谱，我被折磨了好几天。 我这个问题…...
英语科研词汇现象及语言演变探讨
一、词汇形态学的进化困境 希腊-拉丁语系遗存 "Pneumoconiosis"（πνεύμωνκονίαωσις）和"electroencephalogram"（ηλεκτρονεγκέφαλοςγράμμα）的构词方式反映了欧洲学者对古…...
C# 打印PDF的常用方法
这里先提供一个helper类的模板 1.使用默认程序打印 using System; using System.Collections.Generic; using System.Diagnostics; using System.Drawing.Printing; using System.IO; using System.Runtime.InteropServices;namespace PDF {public static class PrintHelper{#…...
若依微服务的定制化服务
复制依赖 复制依赖 复制system服务的bootstrap.yml文件，修改port和name 在nacos复制一个新的nacos配置，修改对应的nacos的配置 ，可能不需要修改，看情况。 网关修改 注意curd的事项，模块名称的修改...
Axios 如何通过配置实现通过接口请求下载文件
前言 今天，我写了 《Nodejs 实现 Mysql 数据库的全量备份的代码演示》 和 《NodeJS 基于 Koa, 开发一个读取文件，并返回给客户端文件下载》 两篇文章。在这两篇文章中，我实现了数据库的备份，和提供数据库下载等接口。 但是&…...