查看效果：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. salesforce 零基础学习（五十一）使用 Salesforce.com SOAP API 实现用户登录以及简单的增删改查(JAVA访问salesforce)

    此篇请参看:https://resources.docs.salesforce.com/202/latest/en-us/sfdc/pdf/salesforce_developer_environme ...

  2. Execute Sql Task 的Result DataSet如何返回

    Execute Sql Task的Result DataSet 主要有以下四种,当Execute Sql Task返回结果之后,需要使用SSIS Variable 来接收数据. 例子中使用的数据表代码 ...

  3. SQL Server 迁移数据到MySQL

    一.背景 由于项目开始时候使用的数据库是SQL Server,后来把存储的数据库调整为MySQL,所以需要把SQL Server的数据转移到MySQL:由于涉及的表比较多,所以想在MySQL中生成对应 ...

  4. Android Drawable、Bitmap、byte[]之间的转换

    转自http://blog.csdn.net/june5253/article/details/7826597 1.Bitmap-->Drawable Bitmap drawable2Bitma ...

  5. VXLAN 概念（Part II）- 每天5分钟玩转 OpenStack（109）

    上一节我们介绍了 VXLAN 的封装格式以及 VTEP.今天我们将通过例子讨论 VXLAN 封装和转发包的过程,以及 Linux 对 VXLAN 的原生支持. VXLAN 包转发流程 VXLAN 在 ...

  6. Util应用程序框架公共操作类(三):数据类型转换公共操作类（扩展篇）

    上一篇以TDD方式介绍了数据类型转换公共操作类的开发,并提供了单元测试和实现代码,本文将演示通过扩展方法来增强公共操作类,以便调用时更加简化. 下面以字符串转换为List<Guid>为例进 ...

  7. pixi.js教程中文版--基础篇

    前言 Pixi.js使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库.提供无缝 C ...

  8. C# 将excel表格嵌入到Word中

    C# 将excel表格嵌入到Word中 继续开扒,今天要实现的是使用C#将excel表格嵌入到Word中这个功能,将word表格导入到excel中我已经写过了,如有需要可参考我之前的文章,在开始前还有 ...

  9. C/C++ 双精度double 数据相加出错缺陷解释

    不知道有没有人和我一样遇到过这样一个问题,请看下面代码. #include<iostream> using namespace std; int main(){ double a=2.3, ...

  10. angular中的$q.defer()服务异步处理

    jquery和angular都有defer服务,我暂以angular为例谈谈我的理解,最后并附上jquery的阮一峰总结的defer. 以我目前项目的部分代码为例说明为什么要用deferred. fu ...