查看效果：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. SSISDB3：Environments 和 Environment Variables

    Environment 是ETL执行时使用的Parameters的集合,可以为一个Project引用不同的Environment variables,从而改变ETL执行的属性. 查看Environme ...

  2. Android之Socket通信、List加载更多、Spinner下拉列表

    Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客户端向服务器发送请求后,服务 ...

  3. SpringMVC+FreeMarker

    前言: 最近在学习SpringMVC,模板引擎用的是FreeMarker,之前没有接触过.利用SpringMVC开发其实还有许多的步骤,比如控制层,服务层,持久化层,实体等等,先弄了一个小demo来总 ...

  4. Python标准库14 数据库 (sqlite3)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Python自带一个轻量级的关系型数据库SQLite.这一数据库使用SQL语言.S ...

  5. Android获取内置sdcard跟外置sdcard路径

    Android获取内置sdcard跟外置sdcard路径.(测试过两个手机,亲测可用) 1.先得到外置sdcard路径,这个接口是系统提供的标准接口. 2.得到上一级文件夹目录 3.得到该目录的所有文 ...

  6. Windows Live Writer 的昨日荣光

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

  7. PHP精选数组函数

    编程怎么能少的了数组呢,以下是学习PHP时常用的数组处理函数.在编程中要遵循一个原则就是DRY(Don`t Repeat Yourself)原则,PHP中有大量的函数,都记住这些函数不太现实,但常用的 ...

  8. Repository 仓储，你的归宿究竟在哪？（一）－仓储的概念

    写在前面 写这篇博文的灵感来自<如何开始DDD(完)>,很感谢young.han兄这几天的坚持,陆陆续续写了几篇有关于领域驱动设计的博文,让园中再次刮了一阵"DDD探讨风&quo ...

  9. php使用递归创建多级目录

    <?php header('Content-type:text/html;charset=utf8'); echo "Loading time:".date('Y-m-d H ...

  10. ZOJ Problem Set - 1392 The Hardest Problem Ever

    放了一个长长的暑假,可能是这辈子最后一个这么长的暑假了吧,呵呵...今天来实验室了,先找了zoj上面简单的题目练练手直接贴代码了,不解释,就是一道简单的密文转换问题: #include <std ...