太阳系模型

news/2026/1/19 13:56:12/文章来源:https://www.cnblogs.com/yinguojin/p/19501345

效果

image

 

参考code

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自适应居中太阳系模型</title><style>body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);font-family: Arial, sans-serif;overflow: hidden;}.container {position: relative;width: 90vw;max-width: 1200px;height: 90vh;max-height: 800px;display: flex;justify-content: center;align-items: center;}canvas {display: block;max-width: 100%;max-height: 100%;width: auto;height: auto;box-shadow: 0 0 30px rgba(0, 100, 255, 0.4);border-radius: 8px;}.title {position: absolute;top: 20px;left: 0;right: 0;text-align: center;color: white;font-size: 24px;text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);z-index: 10;}</style>
</head>
<body><div class="container"><div class="title">太阳系模型</div><canvas id="solarSystem"></canvas></div><script>// 获取canvas元素和上下文const canvas = document.getElementById('solarSystem');const ctx = canvas.getContext('2d');// 设置canvas大小为容器大小function setCanvasSize() {const container = document.querySelector('.container');canvas.width = container.clientWidth;canvas.height = container.clientHeight;}// 初始化canvas大小setCanvasSize();// 监听窗口大小变化window.addEventListener('resize', () => {setCanvasSize();initStars();});// 中心点坐标let centerX = canvas.width / 2;let centerY = canvas.height / 2;// 行星配置 - 根据画布大小调整距离和大小function getPlanetConfig() {const minDimension = Math.min(canvas.width, canvas.height);const scale = minDimension / 600; // 基于原始600的设计比例return [{ name: 'sun', image: 'https://img.alicdn.com/imgextra/i1/O1CN01oVLbLx22VlN34KDQs_!!6000000007126-2-tps-800-800.png',size: 60 * scale,distance: 0,speed: 0,angle: 0},{ name: 'mercury', image: 'https://img.alicdn.com/imgextra/i2/O1CN01UjgqIB1SrRxQfrflh_!!6000000002300-2-tps-800-800.png',size: 5 * scale,distance: 60 * scale,speed: 4,angle: 0},{ name: 'venus', image: 'https://img.alicdn.com/imgextra/i3/O1CN01JGEgLU1dfxnVvp91R_!!6000000003764-2-tps-800-800.png',size: 8 * scale,distance: 90 * scale,speed: 3,angle: 0},{ name: 'earth', image: 'https://img.alicdn.com/imgextra/i4/O1CN01R6wlzD1IhhMlBcGLg_!!6000000000925-2-tps-800-800.png',size: 10 * scale,distance: 120 * scale,speed: 2,angle: 0},{ name: 'mars', image: 'https://img.alicdn.com/imgextra/i1/O1CN01OlZAk81OVEHJ0pazq_!!6000000001710-2-tps-800-800.png',size: 7 * scale,distance: 150 * scale,speed: 1.5,angle: 0},{ name: 'jupiter', image: 'https://img.alicdn.com/imgextra/i2/O1CN01MA3Mk51bAhWxWxHim_!!6000000003425-2-tps-800-800.png',size: 12 * scale,distance: 180 * scale,speed: 1,angle: 0},{ name: 'saturn', image: 'https://img.alicdn.com/imgextra/i2/O1CN01NG2FjS1XDDEofNNhg_!!6000000002889-2-tps-800-800.png',size: 24 * scale,distance: 210 * scale,speed: 0.8,angle: 0},{ name: 'uranus', image: 'https://img.alicdn.com/imgextra/i1/O1CN01wnxTX51xIPkTHqPBr_!!6000000006420-2-tps-800-800.png',size: 9 * scale,distance: 240 * scale,speed: 0.5,angle: 0},{ name: 'neptune', image: 'https://img.alicdn.com/imgextra/i1/O1CN01LTf0rT25zwJWsIDkD_!!6000000007598-2-tps-800-800.png',size: 8 * scale,distance: 270 * scale,speed: 0.4,angle: 0}];}// 月球配置function getMoonConfig() {const minDimension = Math.min(canvas.width, canvas.height);const scale = minDimension / 600;return {name: 'moon',image: 'https://img.alicdn.com/imgextra/i4/O1CN01Ad5SeB20tv1nfRoA2_!!6000000006908-2-tps-800-800.png',size: 4 * scale,distance: 15 * scale,speed: 8,angle: 0};}// 图片对象const images = {};let allImagesLoaded = false;let planets = getPlanetConfig();let moon = getMoonConfig();// 星星数组const stars = [];const starCount = 200;// 初始化星星function initStars() {stars.length = 0; // 清空现有星星centerX = canvas.width / 2;centerY = canvas.height / 2;planets = getPlanetConfig();moon = getMoonConfig();for (let i = 0; i < starCount; i++) {stars.push({x: Math.random() * canvas.width,y: Math.random() * canvas.height,size: 0.5 + Math.random() * 0.5,opacity: 0.5 + Math.random() * 0.5});}}// 加载图片function loadImages() {let loadedCount = 0;const totalImages = planets.length + 1; // 包括月球planets.forEach(planet => {images[planet.name] = new Image();images[planet.name].onload = () => {loadedCount++;if (loadedCount === totalImages) {allImagesLoaded = true;animate(); // 开始动画}};images[planet.name].src = planet.image;});// 加载月球图片images[moon.name] = new Image();images[moon.name].onload = () => {loadedCount++;if (loadedCount === totalImages) {allImagesLoaded = true;animate(); // 开始动画}};images[moon.name].src = moon.image;}// 绘制背景function drawBackground() {// 创建径向渐变const gradient = ctx.createRadialGradient(centerX, centerY, 0,centerX, centerY, Math.max(canvas.width, canvas.height) / 1.5);gradient.addColorStop(0, '#1C2837');gradient.addColorStop(1, '#050608');// 填充背景ctx.fillStyle = gradient;ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制星星stars.forEach(star => {ctx.beginPath();ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;ctx.fill();});}// 绘制轨道function drawOrbit(distance) {ctx.beginPath();ctx.ellipse(centerX, centerY, distance, distance * 0.7, 0, 0, Math.PI * 2);ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';ctx.setLineDash([5, 5]);ctx.stroke();ctx.setLineDash([]);}// 绘制太阳系function drawSolarSystem() {// 清空画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制背景drawBackground();// 绘制行星和轨道planets.forEach(planet => {if (planet.distance > 0) {// 绘制轨道drawOrbit(planet.distance);// 计算行星位置const x = centerX + planet.distance * Math.cos(planet.angle);const y = centerY + planet.distance * 0.7 * Math.sin(planet.angle);// 绘制行星if (allImagesLoaded && images[planet.name]) {ctx.drawImage(images[planet.name],x - planet.size / 2,y - planet.size / 2,planet.size,planet.size);} else {// 如果图片未加载完成，绘制圆形代替ctx.beginPath();ctx.arc(x, y, planet.size / 2, 0, Math.PI * 2);ctx.fillStyle = planet.name === 'sun' ? '#FDB813' : '#87CEEB';ctx.fill();}} else {// 绘制太阳if (allImagesLoaded && images[planet.name]) {ctx.drawImage(images[planet.name],centerX - planet.size / 2,centerY - planet.size / 2,planet.size,planet.size);} else {// 如果图片未加载完成，绘制圆形代替ctx.beginPath();ctx.arc(centerX, centerY, planet.size / 2, 0, Math.PI * 2);ctx.fillStyle = '#FDB813';ctx.fill();}}});// 绘制地球的月球const earth = planets.find(p => p.name === 'earth');if (earth) {// 计算月球相对于地球的位置const earthX = centerX + earth.distance * Math.cos(earth.angle);const earthY = centerY + earth.distance * 0.7 * Math.sin(earth.angle);// 计算月球位置const moonX = earthX + moon.distance * Math.cos(moon.angle);const moonY = earthY + moon.distance * 0.7 * Math.sin(moon.angle);// 绘制月球if (allImagesLoaded && images[moon.name]) {ctx.drawImage(images[moon.name],moonX - moon.size / 2,moonY - moon.size / 2,moon.size,moon.size);} else {// 如果图片未加载完成，绘制圆形代替ctx.beginPath();ctx.arc(moonX, moonY, moon.size / 2, 0, Math.PI * 2);ctx.fillStyle = '#C0C0C0';ctx.fill();}}}// 动画循环function animate() {// 更新行星角度planets.forEach(planet => {if (planet.name !== 'sun') {planet.angle += 0.01 * planet.speed;}});// 更新月球角度moon.angle += 0.01 * moon.speed;// 绘制太阳系drawSolarSystem();// 请求下一帧requestAnimationFrame(animate);}// 初始化initStars();loadImages();</script>
</body>
</html>

　　

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/1183296.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

谷歌最强 AI 开放翻译模型 TranslateGemma：手机也能跑？

谷歌最强 AI 开放翻译模型 TranslateGemma：手机也能跑？

目录 前言 一、 参数游戏的终结&#xff1a;12B > 27B&#xff1f; 二、 谷歌的“特训”秘籍&#xff1a;SFT RL 三、 手机党的福音&#xff1a;4B模型的离线魔法 四、 不止是文字&#xff1a;天生的多模态 结语 &#x1f3ac; 攻城狮7号&#xff1a;个人主页 &#…
阅读更多...
基于Vue.js的人像后期融合网站的设计与实现（毕业设计源码+论文+精美PPT）

基于Vue.js的人像后期融合网站的设计与实现（毕业设计源码+论文+精美PPT）

友善提示 支持JAVA、Python、大数据专业、小程序、PHP、APP、ASP.NET、Node.js、Vue、数据分析、可视化、推荐系统等各类系统定做&#xff0c;您出题目&#xff0c;我们按需求定做。或者我们出相关的选题&#xff0c;并定做系统都支持… 博主简介 作者简介&#xff1a;Java领…
阅读更多...
地下水数值模拟软件Visual modflow Flex

地下水数值模拟软件Visual modflow Flex

一&#xff1a;地下水数值软件的操作流程、建模步骤和所需资料处理及相关注意事项[1] Visual MODFLOW Flex特征 [2] Visual MODFLOW Flex软件界面及模块[3] 地下水数值模拟的建模步骤及数据需求二&#xff1a;模型建模操作方法 技巧、真实案例演练、特殊问题处理[1] 直接模型建…
阅读更多...
2026年山西口碑好的外贸网站建设公司排名，解决外贸企业建站运营痛点 - 工业品牌热点

2026年山西口碑好的外贸网站建设公司排名，解决外贸企业建站运营痛点 - 工业品牌热点

在全球化贸易竞争加剧的当下，一个能精准触达海外客户、高效转化询盘的外贸独立站，已成为企业拓展国际市场的核心阵地。然而，多数外贸企业尤其是中小企业，在建站与营销环节常陷入技术门槛高、运营效率低、获客效果差…
阅读更多...
替代不是终点：支持AI自动化的国产高端芯片封装设计软件/方案推荐 - 品牌2026

替代不是终点：支持AI自动化的国产高端芯片封装设计软件/方案推荐 - 品牌2026

在当前全球半导体产业链加速重构的背景下，电子设计自动化（EDA）工具的自主可控已成为保障国家科技安全与产业稳定的关键环节。作为深耕电子设计自动化（EDA）软件开发领域的高新技术企业，上海弘快科技有限公司凭借前…
阅读更多...
AWS Device Farm 移动端碎片化回归测试实战指南

AWS Device Farm 移动端碎片化回归测试实战指南

‌一、移动端碎片化测试的行业痛点‌ 当前Android设备超24,000款型号&#xff0c;iOS系统版本碎片化率超35%&#xff08;数据来源&#xff1a;2025年StatCounter报告&#xff09;。传统测试面临&#xff1a; ‌真机采购成本高昂‌&#xff08;单设备池维护年均消耗≥50万元&a…
阅读更多...
Laravel和TP框架的区别

Laravel和TP框架的区别

Laravel与ThinkPHP&#xff08;TP&#xff09;框架的核心区别 设计理念与架构 Laravel遵循更现代的PHP开发实践&#xff0c;强调优雅的语法、丰富的功能&#xff08;如队列、事件系统&#xff09;和高度解耦的设计。ThinkPHP更倾向于简化中国开发者的入门门槛&#xff0c;提供…
阅读更多...
FreeSWITCH 的 force_transfer_context

FreeSWITCH 的 force_transfer_context

今天碰到了&#xff0c;先记录下 https://developer.signalwire.com/freeswitch/FreeSWITCH-Explained/Examples/Force-transfer-context-example_13173594/
阅读更多...
DeepSeek说AI

DeepSeek说AI

AI概览 AI&#xff0c;全称人工智能&#xff08;artificial intelligence&#xff09;&#xff0c;指由人类创造的、能像人一样感知、学习、推理、决策和解决问题的智能系统与技术。 简单来说&#xff0c;AI的核心目标是让机器模拟和延伸人类的智能。 AI的概念在1956年就被提…
阅读更多...
文科创业内卷严重？跟紧时代潮流，打造核心竞争力，脱颖而出

文科创业内卷严重？跟紧时代潮流，打造核心竞争力，脱颖而出

文科创业内卷已成既定事实&#xff1a;传统文案、自媒体、教育培训等赛道人满为患&#xff0c;AI工具又不断挤压基础内容生产岗位&#xff0c;加之部分文科生存在“样样懂、样样不精”的能力短板&#xff0c;同质化竞争愈发惨烈。但内卷的本质并非文科无用&#xff0c;而是传统…
阅读更多...
2026中国DevOps平台选型全景洞察：技术适配与效能跃升

2026中国DevOps平台选型全景洞察：技术适配与效能跃升

2026中国DevOps平台选型全景洞察&#xff1a;技术适配与效能跃升 在数字化转型浪潮席卷全球的当下&#xff0c;中国企业正面临DevOps平台选型的关键转折点。随着技术架构的快速演进和政策法规的不断完善&#xff0c;DevOps工具链的选型标准已经从单纯的功能完备性转向更复杂的本…
阅读更多...
从千元到近亿，“死了么”App为何刷爆全网？

从千元到近亿，“死了么”App为何刷爆全网？

2026 年刚开局&#xff0c;互联网就被一个名字不太吉利的 APP 刷了屏——“死了么”&#xff08;1 月 13 日官方公布其后续将启用全球化品牌名 Demumu&#xff09;。没有算法加持&#xff0c;没有 AI 炫技&#xff0c;甚至没有花一分钱推广&#xff0c;这个功能简单到近乎简陋的…
阅读更多...
推荐一下生鲜食材配送企业，苏州旺利涛食品贸易费用多少？ - 工业品牌热点

推荐一下生鲜食材配送企业，苏州旺利涛食品贸易费用多少？ - 工业品牌热点

问题1：长三角地区的连锁餐饮和政企食堂，想找资质齐全的生鲜食材配送专业公司，有哪些核心资质需要重点关注？ 对于连锁餐饮、星级酒店、政企食堂这类对食材安全与合规性要求极高的B端客户来说，选择生鲜食材配送企业…
阅读更多...
【数据库深度解析】关系型、非关系型、向量数据库核心原理与选型

【数据库深度解析】关系型、非关系型、向量数据库核心原理与选型

文章目录目录一、关系型数据库&#xff08;RDBMS&#xff09;&#xff1a;结构化数据的经典解决方案1. 核心技术特性2. 主流代表产品及特点3. 优势与劣势4. 核心适用场景二、非关系型数据库&#xff08;NoSQL&#xff09;&#xff1a;多结构数据的高并发解决方案1. 核心技术特性…
阅读更多...
【Python 技术深度解析】核心特性、生态架构与实战价值

【Python 技术深度解析】核心特性、生态架构与实战价值

文章目录 目录一、Python 核心定位与背景1. 核心定位与优势2. 版本现状3. 核心应用领域 二、Python 核心语言特性1. 语法简洁优雅&#xff0c;可读性极强2. 动态类型与强类型3. 丰富的内置数据结构4. 装饰器&#xff08;Decorator&#xff09;&#xff1a;函数增强的优雅方式5.…
阅读更多...
费马大定律代码化和定理《计算机科学中的数学》外扩学习1

费马大定律代码化和定理《计算机科学中的数学》外扩学习1

前言 《计算机科学中的数学信息与智能时代的必修课》 第1章 什么是证明 1.1 命题 1.15 费马大定律-(又称费马最后定理)xnynznx^{n}y^{n}z^{n}xnynzn 没有正整数解.基础算式展开 当n1时,方程就是xyz,显然有无数正整数解(123)当n1时,方程就是xyz,显然有无数正整数解(123)当n1时,方…
阅读更多...
2026年河南美术艺考培训指南：郑州画室优选力度，双优模式适配新高考 - 深度智识库

2026年河南美术艺考培训指南：郑州画室优选力度，双优模式适配新高考 - 深度智识库

2026年河南美术艺考进入新高考深化阶段，文化课占比不低于50%的录取规则，让美术生面临“专业+文化”双重考核压力。数据显示，河南美术类考生三年降幅达11.0%，留存考生呈现“双优”特征，优质美术集训机构的选择成为…
阅读更多...
揭秘Luminex平台配套原料：优质国产原料供应商推荐 - 品牌推荐大师

揭秘Luminex平台配套原料：优质国产原料供应商推荐 - 品牌推荐大师

在流式荧光检测领域，Luminex平台凭借其高通量、高灵敏度的核心优势，广泛应用于科研探索、临床诊断、药物研发等多个场景，成为生物检测领域的核心工具之一。然而，长期以来，国内Luminex平台配套核心原料多依赖进口，…
阅读更多...
[AI] 模型安全防护实战：Prompt Injection、Jailbreak 与输入净化全攻略

[AI] 模型安全防护实战：Prompt Injection、Jailbreak 与输入净化全攻略

目标：为本地/私有化大模型构建安全防护方案，覆盖 Prompt Injection/Jailbreak 类型、检测与拦截策略、输入净化、提示工程约束及灰度验证方法。 1. 攻击面与威胁 Prompt Injection：恶意指令覆盖系统提示（如“忽略以上规则”）。 Jailbreak：通过花式提示绕过安全边界（角色…
阅读更多...
解放HR的关键一步：OpenCSG公益课教你用工程化提示词，让招聘标准“从始至终”保持一致

解放HR的关键一步：OpenCSG公益课教你用工程化提示词，让招聘标准“从始至终”保持一致

很多人以为“AI进HR”就是“帮忙写个JD”。但公益课里更关键的一句话是：招聘是一个从岗位定义到录用谈判的长链条，AI适合做的不是某个点，而是把多个点串成一致的标准与流程。 一、先把招聘流程画出来，才能知道AI插…
阅读更多...
最新文章

Copyright @ 2022~2023