查看效果：http://hovertree.com/texiao/html5/9.htm

地球自传 http://hovertree.com/texiao/html5/8.htm

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>HTML5模拟太阳系八大行星公转 - 何问起</title>

<meta charset="utf-8" />

<style>body{margin:0px;background-color:black;color:white}.hvtholder{width:1000px;margin:2px auto;}a{color:greenyellow}</style>

</head>

<body><div class="hvtholder"><h3>HTML5模拟太阳系八大行星公转</h3>

<a href="http://hovertree.com">首页</a>

<a href="http://hovertree.com/texiao/">特效</a>

<a href="http://hovertree.com/hvtart/bjae/ipblia78.htm">原文</a>

<a href="http://hovertree.com/texiao/css/8.htm">打火机</a>

<a href="http://hovertree.com/texiao/html5/8.htm">地球转动</a>

<audio src="http://cms.hovertree.com/hovertreesound/hovertreejsys.mp3" autoplay="autoplay" controls="controls"><br />您的浏览器不支持播放音乐。请用支持html5的浏览器打开,例如chrome或火狐或者新版IE等。<br />何问起 hovertree.com<br /></audio>

<canvas id="canvashovertree" width="1000" height="1000" style="background-color: #000;">您的浏览器不支canvas。请用支持html5的浏览器打开,例如chrome或火狐或者新版IE等。何问起 hovertree.com</canvas>

</div>

<script src="http://hovertree.com/texiao/html5/9/sunhovertree.js"></script>

</body>

</html>

转载自：http://hovertree.com/hvtart/bjae/ipblia78.htm

星球 变量名 公转周期 光色 暗色
水星 Mercury 87.70 #a69697 #5c3e40
金星 Venus 224.701.70 #c4bbac #1f1315
地球 Earth 365.2422 #78b1e8 #050c12
火星 Mars 686.98 #cec9b6 #76422d
木星 Jupiter 4332.589 #c0a48e #322
土星 Saturn 10759.95 #f7f9e3 #5c4553
天王星 Uranus 30799.095 #a7e115 #19243a
海王星 Neptune 60152.95 #0661b2 #1E3b73
  何问起 hovertree.com    

八大行星特指太阳系的八个行星，按照离太阳的距离从近到远，它们依次为水星、金星、地球、火星、木星、土星、天王星、海王星。八大行星自转方向多数也和公转方向一致。只有金星和天王星两个例外。金星自转方向与公转方向相反。而天王星是在轨道上横滚的。而曾经被认为是"九大行星"之一的冥王星于2006年8月24日被定义为"矮行星"。hovertree.com

行星的定义:一是必须围绕恒星运转的天体;二是质量足够大，能依靠自身引力使天体呈圆球状;三是其轨道附近应该没有其他物体。按这样的划分，太阳系的行星就只有水、金、地、火、木、土，加上天王、海王星这八颗。 与2006年之前提到的九大行星概念不同，在在2006年8月24日于布拉格举行的第26届国际天文联会中通过的第5号决议中,冥王星被划为矮行星，从太阳系九大行星中被除名。必须是围绕恒星运转的天体--冥王星相符。质量足够大，能依靠自身引力使天体呈圆球状相符，但是冥王星没有能够清空其轨道上的其他物体，因此降级为矮行星。 何 问 起

而同样具有足够质量、成圆球形，但不能清除其轨道附近其他物体的天体称为"矮行星"，冥王星恰好符合这一定义，并被国际天文学联合会确认是一颗"矮行星"。所以冥王星被归为矮行星。从此太阳系只有八大行星。

更多： http://www.cnblogs.com/jihua/p/webfront.html

JS+HTML5的Canvas画图模拟太阳系运转的更多相关文章

  1. html5之canvas画图基础

    HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...

  2. WebGL three.js学习笔记 纹理贴图模拟太阳系运转

    纹理贴图的应用以及实现一个太阳系的自转公转 点击查看demo演示 demo地址:https://nsytsqdtn.github.io/demo/solar/solar three.js中的纹理 纹理 ...

  3. html5之canvas画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  4. html5之canvas画图 1.写字板功能

     写字板事例:       写字板分析:1.点击鼠标開始写字(onmosedown)2.按下鼠标写字(onmousemove)3.松开鼠标,停下写字(撤销onmousemove事件):       代 ...

  5. HTML5使用canvas画图时，图片被自动放大模糊的问题

    最近在研究canvas技术,发现一个问题,就是所画图像会随着画布大小自动变换大小.原因如下 <canvas id="cxt" style="width: 500px ...

  6. HTML5 Canvas 画图入门

    HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...

  7. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  8. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  9. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

随机推荐

  1. samba服务器安装，共享nginx目录

    Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,类似于win的网上邻居,让windows和linux实现文件共享 1.安装smaba服务 yum install samba ...

  2. javascript运动系列第六篇——轨迹和投掷

    × 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...

  3. 前端工程师技能之photoshop巧用系列第一篇——准备篇

    × 目录 [1]作用 [2]初始化 [3]常用工具[4]快捷键 前面的话 photoshop是前端工程师无法回避的一个软件,这个软件本身很强大,但我们仅仅需要通过这个工具来完成基本的切图工作即可.本文 ...

  4. android表白app

    一.前言 马上就要520和521了,是不是还有像我一样的单身狗啊.我就知道有,所以这两天简单写了这个小程序(其实是替别人写的),虽然我并不会用去骗女孩子(因为最近太忙了,实习完之后要搞毕设,要搞论文啊 ...

  5. .NET足球赛事资料数据库平台SmartLottery开源发布——全球足球联赛应有尽有

            本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源C#彩票数据资料库系列文章总目录:[目录]C#搭建足球赛事资料库与预测平台与彩票数据分析目录 前2个月,我的系列文 ...

  6. IOS数据存储之文件沙盒存储

    前言: 之前学习了数据存储的NSUserDefaults,归档和解档,对于项目开发中如果要存储一些文件,比如图片,音频,视频等文件的时候就需要用到文件存储了.文件沙盒存储主要存储非机密数据,大的数据. ...

  7. AngularJS API之$injector ---- 依赖注入

    在AngularJS中也有依赖注入的概念,像spring中的依赖注入,但是又有所不同.Spring中使用构造注入或者设值注入的方式,还需要做一些额外的操作,但是angular中只需要在需要的地方声明一 ...

  8. Windows Live Writer 的昨日荣光

    今天这一篇文章,想写一写Windows Live Writer这款博客编辑器(最早的一个版本是2007年发布的).毫不夸张地说,这是为数不多的几款所见即所得的编辑器之一,当然,它的运行速度慢也是一个众 ...

  9. LVS+Keepalived搭建MyCAT高可用负载均衡集群

    LVS+Keepalived 介绍 LVS LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国 ...

  10. T-SQL CROSS APPLY、MERGE

    写在前面 刚才看项目里一个存储过程,也是好长时间没有使用Sql Server2008了,好多写法和函数感觉到陌生,这就遇到了CROSS APPLY 和MERGE的语法,两者之前完全没接触过. 所以专门 ...