html5实现的canvas太阳系

努力的zhiyi 2014-12-10

效果：

html5实现的canvas太阳系
 代码：

<!doctype html>
<html>
	<head>
		<title>太阳系</title>
	</head>
	<body>
		<canvas id="canvas" width="1000" height="1000" style="background-color:#000">
			您的浏览器不支持canvas标签
		</canvas>
		<script>
			var cxt = document.getElementById("canvas").getContext("2d");
			//画太阳和轨道
			function drawTrack(){
				cxt.beginPath();
				cxt.arc(500,500,20,0,Math.PI*2,false);
				cxt.closePath();
				var sunColor = cxt.createRadialGradient(500,500,0,500,500,20);
				sunColor.addColorStop(0,"#f00");
				sunColor.addColorStop(1,"#f90");
				cxt.fillStyle=sunColor;
				cxt.fill();
				for(var i=0;i<8;i++){
					cxt.beginPath();
					cxt.arc(500,500,(i+1)*50,0,Math.PI*2);
					cxt.closePath();
					cxt.strokeStyle="#fff"
					cxt.stroke();
				}
			}
			drawTrack();
			//行星
			function Star(x,y,r,clcye,sColor,eColor){
				cxt.save();
				cxt.translate(500,500);
				cxt.rotate(time*Math.PI*2/clcye);
				cxt.beginPath();
				cxt.arc(x,y,r,0,Math.PI*2);
				cxt.closePath();
				var starColor = cxt.createRadialGradient(x,y,0,x,y,r);
				starColor.addColorStop(0,sColor);
				starColor.addColorStop(1,eColor);
				cxt.fillStyle=starColor;
				cxt.fill();
				cxt.restore();
			}
			
			var time = 0;
			function drawStar(){
				cxt.clearRect(0,0,1000,1000);
				drawTrack();
				Star(0,-50,10,87.70,"#A69697","#5C3E40");	//水星
				Star(0,-100,10,224.701,"#C4BBAC","#1F1315");	//金星
				Star(0,-150,10,365.2422,"#78B1E8","#050C12");	//地球
				Star(0,-200,10,686.98,"#CEC9B6","#76422D");	//火星
				Star(0,-250,10,4332.589,"#C0A48E","#322222");	//木星
				Star(0,-300,10,10759.5,"#F7F9E3","#5C4533");	//土星
				Star(0,-350,10,30799.095,"#A7E1E5","#19243A");	//天王星
				Star(0,-400,10,60152,"#0661B2","#1E3B73");	//海王星
				
				time += 1;
			}
			setInterval(drawStar,10);
		</script>
	</body>
</html>
努力的zhiyi

努力的zhiyi

相关推荐

angular8 + threejs 实现太阳系3D动画

当项目决定要做宇宙星空效果的时候，我百度了一波；发现了threejs；然后就从0开始学习了；一路上坑坑洼洼的；网上确实有相关文章，但没有相对于新手的；尤其是我这种现看文档现做的；而且很多代码都是使用原生js或者jquery的；这次是我把threejs引入a

liulinsp / 0评论 2020-01-09

Ghost配置6——首页太阳系动画效果

最近在逛知乎时，意外发现了一组CSS效果，其中一个太阳系运行的动画吸引了我。于是我决定把这个效果加到个人博客的首页头部中来。</header>编写CSScss代码在作者的codepen上有说明，注意选择编译后的css进行查看。我个人写了一个so

淡风wisdon大大 / 0评论 2019-07-01

基于canvas的简易太阳系模型

最近闲下来，开始了HTML5的入门之旅。跟着某视频做了两个简单的canvas例子。此处为简易太阳系模型实例。<canvas width="800" height="800" id="sunClass&

Abudula / 0评论 2014-10-08

html5实现太阳系星球演示效果

漂亮逼真的星球展示效果，html5+css3实现的效果，IE下效果不佳，建议在FF或者safari浏览器下浏览

zwq / 0评论 2013-02-21

C++ 实现太阳系行星系统

本教程由欧龙崎发布在实验楼，完整教程及在线练习地址：C++ 实现太阳系行星系统，可以直接在教程中下载代码使用demo。基本框架设计一、说明实验介绍本次实验将使用 OpenGL GLUT 编写一个简单的太阳系运行系统。

makeWorks / 0评论 2019-06-20

今日要闻：NASA发现第二个太阳系 移动发AI平台 吴恩达成立新项目

借助谷歌的AI技术,NASA发现了“第二个太阳系”美国国家航空暨太空总署和谷歌周四晚些时候在一份声明中表示，由于第八颗行星盘旋在开普勒90号卫星上，我们的太阳系现在与单颗恒星周围大多数行星并列。开普勒90是一颗类似太阳的恒星，距离地球大约2545光年。Go

snmplink / 0评论 2017-12-15

今日芯声｜无人机探路火星！殖民太阳系还远吗？

人类要殖民太阳系，最佳星球就是火星。自从美国在1964年11月28日发射火象探测器成功之后，迄今为止苏联、美国、欧洲、日本、印度、中国共已发射数十艘太空船。2012年8月6日，人类第一俩核动力驱动车好奇号在火星着陆。5月14日消息，近日NEC集团子公司NE

无人机wikipedia / 0评论 2018-05-18

HTML5的Canvas画图模拟太阳系运转

今天研究的是利用HTML5的Canvas画图来模拟太阳系运转，首先，在这个太阳系里分为画轨道和画星球两个部分，对于每一个星球我们要知道它的颜色和公转周期，如下图。<html><head></head><body&g

xxmzumeng / 0评论 2014-11-25

科学家发现有一类行星很奇特, 他们的热源和其他星球是相反的!

它是指行星的公转轨道比较接近宿主恒星，这一类的行星也可以在其他的星系当中能找到，它本身的大小比木星还要大，而它的运行轨道要比水星离太阳还要近一些。在如此近的距离当中，可以有很多的固体原料形成核，也可以有足够的气体形成巨行星，而当热木星的质量达到了木星质量的

中国科普博览 / 0评论 2018-01-31

被誉为“黑洞兄弟”的中子星, 突然闯入太阳系, 人类将遭遇什么灾难?

你是否较为细致地了解过中子星？你会不会在潜意识里就认为中子星只是浩大宇宙中一颗普通的，渺小的恒星而已？中子星是一颗十分独特的恒星，它被称为恒星中的黑洞。而且，中子星的密度极大，达到了10亿吨每立方厘米，这相当于是700多万亿个太阳的密度之和。中子星，也被称

我在国博讲故事 / 0评论 2018-01-30

史前金星或孕育了超级文明, 科学家根据城市废墟推测, 地球文明或来自金星

说到金星，金星给人最初的印象就是，它是一个地狱般的星球。金星表面充斥着大量的二氧化碳气体，同时，金星星球表面温度还高达500摄氏度，如此高温，地球上没有任何一个物种可以承受。科学家认为主要原因有二，一是金星与太阳之间的距离，二是太阳的亮度。而金星上的生命为

心理学哲学批判性思维 / 0评论 2018-01-20

地球文明也许起源于远古金星

金星，夜空中除了月亮的第二亮天体，视星等达-4.7。金星一直被认为是人间炼狱，被浓浓的二氧化碳包裹着，导致其地表温度高达500摄氏度，这样的温度足以杀死任何地球生命。金星体积、质量和都地球相仿，那为什么环境相差那么大呢？科学家认为最主要原因还是太阳，金星与

心理学哲学批判性思维 / 0评论 2018-01-20

人类至今无法突破太阳系, 科学家触摸真相, 这三种结果我无法接受

在地球上各个种族中都异口同声说是神创造了人类，那么这个神到底是谁？我们生活在银河系的一个安静的旋臂里，这里有千亿颗恒星、气体云、黑洞、暗物质、中子星和行星，在银河系中心有一个超大质量的黑洞，从远处看我们的星系看起来非常稠密，但在现实中它大多数由一无所有的空

心理学哲学批判性思维 / 0评论 2018-01-19

朱诺号”探测器拍摄美轮美奂的木星照片

水被认为存在于木星大气层的深处，所以被观测到的数值偏低。不稳定的带状物、旋涡、风暴和闪电共同构成了木星瑰丽的表面图案。等人类能够飞往木星的时候，我们这一代人或许都已经过世了。

无人机日常 / 0评论 2018-01-19

直径超10万公里厚度只有3米, 那里蕴藏着45亿年前太阳系诞生的秘密

在太阳系中充满了各种奇迹，有个地方我们可以看到建立太阳系的过程，在今天仍在进行，一个著名，美丽和复杂的地方，一个数百年天文学家都着迷的地方，土星！卡西尼号飞船于1997年发射，它是发送到太阳系外域最大最先进的航天器，其目的是研究土星及土星环。土星系统可以看

如何认真地活着 / 0评论 2018-01-17

小行星撞击之类简直弱爆了, 银河系与其它星系的大碰撞才有得看

比星系更大的宇宙单位是星系团，而我们的银河系和仙女座星系就隶属于同一个星系团，而且还共同构成了整个星系团的核心。根据银河系与仙女座星系的距离计算，这件事将会发生在40亿年之后，星系间的大碰撞往往会造成奇特的天文现象，届时我们的子孙大可一饱眼福。

春哥聊天 / 0评论 2018-01-17

冰为什么能比钢铁还硬? 冥王星上的冰盖坚不可摧!

在我们的常识中，铁无疑比冰块要坚硬百倍，但事实并非这么简单，在一定的条件下，冰是比钢铁更坚硬的物质。冥王星虽然被踢出九大行星行列，不过它在太阳系中的价值仍然不可忽略。莫氏硬度指的是用刻痕法将棱锥形金刚钻针刻划所测试矿物的表面，并测量划痕的深度，该划痕的深度

天文八卦学 / 0评论 2018-01-16

登陆木星会有哪些有趣的事?

木星作为太阳系中最大的行星，一直是人类探索的目标，这颗巨大的气态星球主要是由氢元素和氦元素组成，其内核温度高达30000摄氏度。木星还肩负着保护地球的任务，若是没有木星，地球恐怕要无数次与陨石和彗星相撞。以上的情形是科学家结合探测数据对木星进行模拟的环境，

天文八卦学 / 0评论 2018-01-16

神秘未知力量在太阳系内部画下特定区域, 让旅行者一号用40年才飞出

之所以这么说是根据目前飞行器在宇宙中的情况确定的，美国科学家发射的探测车都是在宇宙中飞行了很短时间内就开始在这区域中失联，只有少数的探测器依然还能跟地球保持联系，比如说美国宇航局发射的旅行者一号，这是在原先的基础上一直在宇宙中执行任务，并且经过了40年的飞

黑白漫文化 / 0评论 2018-01-15

朱诺航天器最新木星照片公布, 终于明白梵高画作的灵感来源了

太阳系中的木星因其巨大的大红斑让很多人印象深刻，在人类发射的航天器中，有很多都曾拜访过木星，最著名的要数卡西尼号，另外还有先驱者10号、旅行者1号、伽利略号等航天器。而今天我们要看的是一批由新航天器“朱诺号”发回的新的木星照片。虽然朱诺号未来还将为人类提供

读点儿设计 / 0评论 2018-01-15

把这颗恒星放到太阳系中心, 大半个太阳系都被它占据, 地球被秒毁

参宿四是一颗质量非常大的恒星，也被称为猎户α距离我们大约有600光年，非常遥远，在天文望远镜中也只是一个点，假如把它放在太阳系的中心，那么它将延伸到木星的轨道。参宿四的光斑和其它表面的温度都比太阳表面温度低。经过观测研究证明，仙女座大星系是宇宙岛，故又称仙

天文八卦学 / 0评论 2018-01-15

三体中将太阳系瞬间将为二维的恐怖文明：歌者文明

歌者文明是出现在刘慈欣所著的《三体》科幻系列作品第三部《死神永生》中的一个文明程度远高于地球文明和三体文明的外星种族。基于黑暗森林法则的存在，歌者文明在途经太阳系旁的星际空间时，随手投掷了一片二向箔将地球文明毁灭，并摧毁了存在于三维宇宙中的太阳系。但是书中

祖先 / 0评论 2018-01-14

地球寿命有限, 那个时候才是真的世界末日!

地球是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁，它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起

心理学哲学批判性思维 / 0评论 2018-01-14

土卫二表面的水气来自内部? 探测器拍到了其喷出水气的画面!

太阳系当中拥有八大行星，而土星则是非常低调的一颗行星，根据距离太阳的远近来说，土星位列太阳系的第六位，土星的和海王星、天王星同称为木行星，土星的主要成分为氢气，另外还有少许的微量元素和氦元素，土星的内部结构则是有冰和岩石组成。土星上面的风速比较大，最高的风

天文八卦学 / 0评论 2018-01-13

科学家最新研究证实: 首个访问我们太阳系的“外星访客”真实身份

本月初，一个独特的小行星飘入了我们的太阳系，它独特之处引起了大家的热议，科学家认为这有可能是外星人发射的宇宙探测器。因为它长得瘦而长比例10：1，每7.3小时绕自转轴旋转一周，亮度忽明忽暗最大相差10倍的变化。不过最新的研究资料显示，Oumuamua只是一

扑克投资家 / 0评论 2018-01-13

奇怪的水星和金星, 想了解它们比登陆火星还困难

人类对金星的探测曾遭遇过多次失败，前苏联先后发射金星系列探测器十多次，但大多数无果而终。面对探测器在金星表面的坠毁问题，宇航部门不得不一次次改进“着陆”技术。1972年，前苏联的“金星8”号航天器在金星向阳面上第一次实现软着陆。1975年，“金星9”号和“

天文八卦学 / 0评论 2018-01-12

银河系转动的能量来自哪里? 科学家发现它才是宇宙的控制者

自打接触科学知识以来，我们就知道宇宙是浩瀚无比、无边无际的，其的构成非常大，是由星云层和无数星球组成的。银河系是宇宙中无数星系中的一个小星系，而太阳系也就是银河系的四大组成部分之一。而银河系运动所需能量的出处更是惊人，是由一种名为暗物质的物体提供的，它在宇

中国科普博览 / 0评论 2018-01-11

我们的宇宙到底有多大? 科学家: 顺着这个思路想下去, 会吓着你!

我们所处的这个宇宙到底有多大？但是至今谁也不能说出它的边际在哪里，它的尽头又在哪里！在一次科学家报告会上，有人问科学家我们这个宇宙到底有多大？科学家笑笑说，要描述宇宙的大小，好吧，请您跟着我这条思路想下去，记住，别吓着自己！也不要怜惜生命的渺小！在我们人类

那个谜一样的生物 / 0评论 2018-01-09

被封杀的预言: 特斯拉预言

特斯拉预言了一站、二战、更有泰坦尼克号的沉没，而这位预言之子，并不只是预言了这些，特斯拉预言中还有一个更为惊人的预言，就是其实地球只是一个实验场，太阳系也是被创造出来的。其中阿姆斯特朗回来后立即得到忧郁症并且接受心理治疗。他一直对NASA很不谅解，因为他认

VTEC / 0评论 2018-01-08

太阳系的“水球”土卫二到底有多大可能隐藏着外星文明? 科学家做出推测

近期，科学家把研究的重点放在了土卫二上。科学家认为，土卫二是太阳系中最有可能具有外星生命的星球。主要是因为，科学家发现土卫二上存在众多有利于生物生存的条件。这时有人会提出，万一多年以来，土卫二表面的冰层从来就没有融化过呢？综上所述，土卫二极有可能拥有丰富的

中国科普博览 / 0评论 2018-01-07

NASA在太阳系边缘上的逆天发现, 一颗小行星潜伏在此已有50年之久

对于之前一直没有发现该行星，科学家认为很有可能就是其本身的体积微小，并且在太阳系的边缘上有着很高的隐蔽性，而在这样的情况下，科学家发射了那么多探测器没有发现其踪迹也是情理之中，但是目前科学家并不是很在意之前没有发现这颗小行星的原因，更多的是关注其在太阳系的

心理学哲学批判性思维 / 0评论 2018-01-07

这11个关于太阳系的神奇奥秘连科学都无法解释!

虽然我们知道地球极可能不是唯一存在生命的星球，但同时，我们也无法证明在地球之外存在任何生命。金星是太阳系中最热的星球，它有着所有非气体行星中最厚的大气层。有理论认为这是一种特殊的晶体在温度变化时改变了其反射特性。我们有理由相信太阳系中只有8颗行星，但是我们

天文八卦学 / 0评论 2018-01-07

冥王星背面出现神秘洞口, 图像放大后美宇航局被质疑隐瞒事实真相

美国宇航局新视野号探测器经过长达9年的深空飞行，终于在去年7月抵达冥王星，全程接近48亿公里。完成历史性的飞掠观测后，探测器开始传回大量数据，由于数据非常庞大，加之距离又远，传输的速度很慢，在接下来一年的时间美国宇航局都在一点点收数据。近日，美国宇航局收到

太空堡垒 / 0评论 2018-01-07

人类连太阳系都没有飞出去, 如何知道银河系长什么样子?

对于银河系的一些问题，我们总能说出个所以然来。然而，关于银河系的问题我们人类又是如何知道的呢？据了解，古印度天文学家在观测天空时，发现了一条奇怪的光带横跨在空中。据了解，伽利略用望远镜观测天空时，证明了亚里士多德的观点是错误的，同时确认银河系是恒星的集合体

稼轩门下走狗 / 0评论 2018-01-07

为何水星离太阳很近没被吸过去, 冥王星离太阳很远不飞出太阳系?

水星离太阳那么近不会掉进太阳里和冥王星离太阳那么远不会飞出太阳系是一个道理，这就是万有引力定律的体现。冥王星也是有质量，虽然冥王星的轨道距离更远，但不代表冥王星就一定会飞走，冥王星之外还有大量的天体，其质量也远远超过冥王星的质量，这些天体都没有飞走，更不用

春哥聊天 / 0评论 2018-01-06

地球在太阳系中的地位: 竟这么小!

在图中，北美洲被PS到了木星上，旁边是木星上著名的“大红斑”。正如图中所示，木星上的巨大风暴可能完全将美洲大陆吞噬掉。太阳系中最高的火山是火星上的奥林匹斯山。木卫二上的水量可能比地球上的水覆盖面积宽近500公里。太阳质量占太阳系总质量的99.86%，足以放

天文八卦学 / 0评论 2018-01-06

人工智能发现开普勒星系的第八颗行星, 比地球大30%, 或成第二个太阳系

太阳系位于银河系的一个普通臂旋上，共有八大行星和无数小行星、卫星，它们各个天体具有不同的特色，最终构成了我们所熟悉的太阳系。果不其然，美国宇航局在去年12月中旬宣布发现了开普勒90行星的第八颗行星――开普勒-90i。也就是说，开普勒90星系已经证实具有八颗

人心理的那些事儿 / 0评论 2018-01-06

冥王星回归九大行星, 冥王星为什么被除名?

冥王星一直都是九大行星之一天文学家却在5年前突然间将冥王星从九大行星除名，究竟有什么特别的原因呢?近日有消息传出冥王星又将回归九大行星，这是真是假呢，冥王星于1930年被天文学家ClydeTombaugh发现，此后的76年里，冥王星一直与其它八大行星并称为

天文八卦学 / 0评论 2018-01-05

为何人类还没发现外星人: 这才是原因

据国外媒体报道，在相对较短的时期内，我们取得了很多太空成绩。我们已经可以将人类送到月球，并在太空环境中生活，研制出大型精密望远镜，能够观测更遥远的太空区域，甚至火箭发射探测器至火星轨道，发射探测器至太阳系边缘。然而，一些机构组织将人类送至更遥远的太空边界。

心理学哲学批判性思维 / 0评论 2018-01-04

5艘探测器在木星上出现异常变化, 科学家: 其表面或隐藏宇宙时空隧道

木星在太阳系中，是一颗属于寒冷行星的星球，在这里的气候不跟金星一样，基于离太阳比较远而出现了终年严寒的气候。然而根据科学家对木星的探索，发现在这星球上有着可疑的迹象。当然这些只是科学家对探测器出现异常的一种推测，毕竟在木星上还有很多未知的区域，而这个就是让

中国科普博览 / 0评论 2018-01-03

水的保质期是多久? 几十亿年的水你敢喝吗?

我们都知道，太阳系是由一大团星际尘埃形成的，尘埃是干的，没有水分，但星云中含有的氢和氧却能合成水。当太阳第一次发出光亮时，这些水分从太阳系中被挤了出来，自此之后，人们只能从外太阳系，或者太阳系边际的慧星轨道中寻找到水份。这些科学家用使用相对年龄测定法，测出

春哥聊天 / 0评论 2018-01-02

太阳系出现大型“水库”, 科学家: 地球的水在它面前小巫见大巫

也许你一直都认为地球的水资源储量是十分丰富的，但是与宇宙中某些星球相比起来，例如木卫二，简直是小巫见大巫了。木卫二，很多天文爱好者并不会对这颗星球感到陌生。木卫二属于木星系统，科学研究表明，木卫二星球有着巨型的水库。而木卫二拥有相对良好的星球环境，木卫二上

无人机日常 / 0评论 2018-01-02

旅行者1号为何会莫名减速? NASA称其遭到了某种神秘力量的控制

旅行者1号是人类向太空深处发射的第一颗探测器，它带有大量关于地球知识的存储设备，其中包含了所有人类的语言、动物的叫声，代表性的音乐以及地球气候变化时产生的各种声音。可能有的朋友之前认为一旦超过冥王星，那不就是飞出太阳系了嘛？其实并不是这样，我们这个恒星系的

春哥聊天 / 0评论 2018-01-01

宇宙在不断膨胀, 一架飞出太阳系的飞机有没有可能再也回不来了?

银河系的半径大概几万光年，在这个尺度上，宇宙膨胀可以忽略不计。因此，你说的人类飞出太阳系就因为宇宙膨胀回不来了，简直就是不可能的，当它不膨胀好了。当然了，随着时间的推移，过了很长的时间，也许那时候的宇宙膨胀的速率会越来越快，到了那个遥远的未来，也许太阳系尺

那个谜一样的生物 / 0评论 2018-01-01

人类能不能离开太阳系, 你知道离开太阳系到底有多难吗?

近年来，航空航天事业飞速发展，人类开始了太阳系内的星际探索。还完成登上月球的载人探索计划，而无人飞行器探索也已到达太阳系的外层边缘。但是要想探索太阳系外的其他星球，我们必须离开太阳系！显然，以目前人类的科技水平还达不到。而且，宇宙飞行需要考虑的不仅仅是飞行

我在国博讲故事 / 0评论 2018-01-01

冥王星已飞过! 距离地球最近的半人马座阿尔发星旅行还有多远?

据国外媒体报道，在美国宇航局新视野号探测器完成其主要任务飞掠冥王星后，距离地球较近的半人马座阿尔发星有可能成为星际飞船的最佳目的地。半人马座阿尔法星由三颗恒星组成，该系统内可能还含有其他行星存在；作为距离太阳系最近的恒星系统，半人马座阿尔法星距离太阳仅有4

天文八卦学 / 0评论 2017-12-31

为什么旅行者1号越靠近太阳系边缘速度越慢? 有神秘力量禁止人类探索宇宙的活动?

就好比每个人都有家庭，而如果别的人突然闯入你家，还想住在你家里安营扎寨，你愿意吗？自古以来，天外来客的例子是不胜枚举。还有木星上的人、土星上的、水星以及其它星就不可能有其它的形态存在吗？在无边无际的宇宙中，旅行者一号咋就在靠近太阳系的飞行的速度就变慢了呢？

春哥聊天 / 0评论 2017-12-31

趣味科普: 宇宙中8个有趣的冷知识, 冥王星竟然没有俄罗斯大?

根据NASA的新视野号探测器发回的最新数据，冥王星表面积为17,646,012平方公里。而俄罗斯的领土面积为17,125,200平方公里，与冥王星面积相当接近。特别是在2015年以前，老旧的的数据甚至显示，俄罗斯要更大一些。可见，冥王星被剔除出九大行星一点

心理学哲学批判性思维 / 0评论 2017-12-30

金星上的微风到底有多大?

众所周知，金星是一个人类不能承受、被称为地狱的地方。金星上那不计其数的火山其实就是导致金星温度上升的主要原因，在正常情况下的地表温度仍要460摄氏度。幸好地球和金星在这点上不一样，但是金星与地球还是有共同的特点，就是金星上面也会刮风。金星与地球距离不远，所

OccamsRazor / 0评论 2017-12-28