查看效果：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. 【笔记】js获取当前点击元素的索引

    以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...

  2. mysql数据库备份

    前一段时间因为误操作删除了一张表的几条数据,弄得很尴尬,正好这周有空就折腾了下数据备份的知识,现把mysql的数据备份相关实践和心得总结如下: 一.使用mysqldump命令备份数据库: 备份整个数据 ...

  3. Sql Server系列：存储过程

    1 存储过程简介 存储过程是使用T-SQL代码编写的代码段.在存储过程中,可以声明变量.执行条件判断语句等其他编程功能.在MS SQL Server 2012中存储过程主要分三类:系统存储过程.自定义 ...

  4. 数据结构与算法JavaScript (三) 链表

    我们可以看到在javascript概念中的队列与栈都是一种特殊的线性表的结构,也是一种比较简单的基于数组的顺序存储结构.由于javascript的解释器针对数组都做了直接的优化,不会存在在很多编程语言 ...

  5. Introduction of OpenCascade Foundation Classes

    Introduction of OpenCascade Foundation Classes Open CASCADE基础类简介 eryar@163.com 一.简介 1． 基础类概述 Foundat ...

  6. MVVM框架下 WPF隐藏DataGrid一列

    最近的一个项目,需要在部分用户登录的时候,隐藏DataGrid中的一列,但是常规的绑定不好使,在下面举个例子. XAML部分代码 <Window x:Class="DataGridCo ...

  7. 深入理解 OWIN 中的 Host 和 Server

    The Open Web Interface for .NET (OWIN),注意单词为大写,之前好像都写成了 Owin,但用于项目的时候,可以写成:Microsoft.Owin.*. OWIN 体系 ...

  8. ZOJ Problem Set - 1402 Magnificent Meatballs

    比较简单的题目,题目大意就是将n个数字围成一个圈,找到一个划分,是的划分左边的数字之和等于右边的数字之和: e.g 10 1 2 2 5,那么可以找到一个划分10 | 1 2 2 5使得两边数字之和都 ...

  9. 基本的window.document操作及实例

    基本的window.document操作及实例 找元素 1.根据id找 var d1 = document.getElementById("d1"); alert(d1); 2.根 ...

  10. 大型网站提速关键技术(页面静态化,memcached,MySql优化)(三)

    页面静态化的技术实现有两种方式 使用PHP自己的缓存机制 先说明一下OB缓存的机制. ob1.php 代码:说明的ob的各个用法->项目中 ☞ 如何打开ob缓存 ①     配置php.ini ...