请珍惜劳动小编成果，这篇文章是原来小编，转载请注明出处。

速度的參数与真实速度有点差距。大家能够自行调整

<!DOCTYPE html>

<html>

<head>

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

	<title>地球绕着太阳转，月球绕着地球转</title>

</head>

<body>

    <canvas width="600" height="600" style="background:black"id="canvas">

    	您的浏览器不支持canvas

    </canvas>

    <script>

        //获取画布

         var canvas=document.getElementById('canvas');

        //获取画图环境

         var cxt=canvas.getContext('2d');

        //d单位时间time （1:1天）

        var time=0;

        function draw(){

        	 //清除画布

       	       cxt.clearRect(0,0,600,600);

           //画地球轨道

                cxt.strokeStyle="#FFF";

                cxt.beginPath();

                //路径函数

                cxt.arc(300,300,180,0,360,false);

                cxt.closePath();

                cxt.stroke();  

            //画太阳

                cxt.beginPath();

                //路径函数 x,y,r,角度范围,顺时针/逆时针

                cxt.arc(300,300,20,0,360,false);

                cxt.closePath();

                //填充(渐变色)

                //cxt.createLinearGradient(内圆心x,内圆心y，内半径r,外圆心x。外圆心y，外圆半径r);

                var sunColor=cxt.createRadialGradient(300,300,0,300,300,10);

                sunColor.addColorStop(0,"#F00");

                sunColor.addColorStop(1,"#F90");

                cxt.fillStyle=sunColor;

                cxt.fill();

        //画地球

                cxt.save();

                //异次元空间00点

                cxt.translate(300,300);

                //旋转角度,地球公转一周须要365天。time=1转365/360度

                cxt.rotate(time*365/360*Math.PI/180);

                //画球

                cxt.beginPath();

                cxt.arc(180,0,10,0,360,false);

                var earthColor=cxt.createRadialGradient(180,0,0,180,0,10);

                cxt.strokeStyle="#050c12";

                earthColor.addColorStop(0,"#78B1Eb");//#&8B1Eb

                earthColor.addColorStop(1,"#050c12");//#050c12

                cxt.fillStyle=earthColor;

                cxt.fill();

                cxt.closePath();

        //画月球轨道和月球

                cxt.save();

             /*   异次元空间00点,在前边的基础上，画地球时以（300,300）为中心。且未退出异次元空间

                月球轨道以地球为中心，在异次元空间，地球为（180,0），这个地方我写错了，改了两个小时才改好 */

                cxt.strokeStyle="#FFF";

                cxt.translate(180,0);

                //画月球轨道

                cxt.beginPath();

                cxt.arc(0,0,30,0,360,false);

                cxt.stroke();

                cxt.closePath(); 

                //画月球

                cxt.rotate(time*365*Math.PI/180);

                cxt.beginPath();

                cxt.arc(30,0,5,0,360,false);

                var moonColor=cxt.createRadialGradient(30,0,0,30,0,5);

                cxt.strokeStyle="#322222";

                moonColor.addColorStop(0,"#c0a48e");

                moonColor.addColorStop(1,"#322222");

                cxt.fillStyle=moonColor;

                cxt.fill();

                cxt.closePath();

                cxt.restore();

                cxt.restore();

                //每画一次图像，时间參数加1

                time+=1;

         }

           draw();

           //通过改动第二个參数课调整速度

           setInterval(draw,50);

    </script>

</body>

</html>

版权声明：本文博客原创文章，博客，未经同意，不得转载。

开玩笑html5(五岁以下儿童)---绕地球月球，地球绕太阳运动（canvas实现，同样可以移动哦）的更多相关文章

  1. （五岁以下儿童）NS3样本演示：桥模块演示样品csma-bridge.cc凝视程序

    (五岁以下儿童)NS3:桥模块演示样品csma-bridge.cc凝视程序 1.Ns3 bridge模csma-bridge.cc演示示例程序的目光 // Network topology // // ...

  2. linux下一个Oracle11g RAC建立（五岁以下儿童）

    linux下一个Oracle11g RAC建立(五岁以下儿童) 四.建立主机之间的信任关系(node1.node2) 建立节点之间oracle .grid 用户之间的信任(通过ssh 建立公钥和私钥) ...

  3. python学习笔记（五岁以下儿童）深深浅浅的副本复印件，文件和文件夹

    python学习笔记(五岁以下儿童) 深拷贝-浅拷贝 浅拷贝就是对引用的拷贝(仅仅拷贝父对象) 深拷贝就是对对象的资源拷贝 普通的复制,仅仅是添加了一个指向同一个地址空间的"标签" ...

  4. PE文件结构（五岁以下儿童）基地搬迁

    PE文件结构(五岁以下儿童) 參考 书:<加密与解密> 视频:小甲鱼 解密系列 视频 基址重定位 链接器生成一个PE文件时,它会如果程序被装入时使用的默认ImageBase基地址(VC默认 ...

  5. 开玩笑Web它servlet(五岁以下儿童)---- 如何解决servlet线程安全问题

    servlet默认值是安全线的存在,但说白,servlet安全线实际上是一个多线程线程安全问题.因为servlet它正好是一个多线程的安全问题出现. 每次通过浏览器http同意提交请求,将一个实例se ...

  6. ExtJs4得知（五岁以下儿童）主要的Ext分类

    Ext类是ExtJs最常见的.最基本的类,它是一个全局对象,它封装了全班.辛格尔顿和 Sencha 该方法提供了一种有用的库. 嵌套在该命名空间中一个较低的水平最用户界面组件. 但是提供了很多有用的功 ...

  7. Scrapy研究和探索（五岁以下儿童）——爬行自己主动多页（抢别人博客所有文章）

    首先.在教程(二)(http://blog.csdn.net/u012150179/article/details/32911511)中,研究的是爬取单个网页的方法.在教程(三)(http://blo ...

  8. nagios二次开发（五岁以下儿童）---nagios和nagiosql关系

    基于nagios和nagiosql理解.这将是这两个梳理比较粗糙的简单关系,有关详细信息,请参阅下面的图如:      从上面的关系图中能够看出,nagios与nagiosql共享了主机.主机组.服务 ...

  9. Lichee （五岁以下儿童） sysconfig1.fex 配置系统

    sysconfig配置系统,作为一个通用的软件平台,还希望通过它.能够适应用户不同的方案.通过给出一个相应的配置.用户的方案就能够自己主动执行,而不须要改动系统里面的代码,或者又一次给出參数. 一. ...

随机推荐

  1. UVA 11235 Frequent values（RMQ）

    Frequent values TimeLimit:3000Ms , ... , an in non-decreasing order. In addition to that, you are gi ...

  2. kafka解释三的具体：发展Kafka应用

    一个.整体外观Kafka 我们知道.Kafka系统有三大组件:Producer.Consumer.broker . producers 生产(produce)消息(message)并推(push)送给 ...

  3. Unable to start MySQL service. Another MySQL daemon is already running with the same UNIX socket

    Unable to start MySQL service. Another MySQL daemon is already running with the same UNIX socket 特征 ...

  4. HDU 3954 Level up（线段树)

    HDU 3954 Level up 题目链接 题意:k个等级,n个英雄,每一个等级升级有一定经验,每次两种操作,一个区间加上val,这样区间内英雄都获得当前等级*val的经验,还有一个操作询问区间经验 ...

  5. Android kxml解析WBXML

     WAP Binary XML定义好XML片断表述出同步server地址.远程数据库名称.登录账号等等内容一.两种訪问方法: 眼下的kxml支持两种wap格式:WBXML/WML. 而有两种方法将解析 ...

  6. 兔子--Fragment与ViewPager要切换滑动效果

    效果图: 文件夹结构: 代码分析: MainActivity.java package com.example.myfragment; /** * @author Arthur Lee * @time ...

  7. DrectX11学习笔记Texture2D有关

    ///////////////////////////////////////////////////////////////////////////////////// 有时候....有时候.... ...

  8. error C2248: “CObject::operator =”: 不可访问 private 员(于“CObject”类声明)

    MFC如果编码错误: 演出:error C2248: "CObject::operator =": 不可访问 private 员(于"CObject"类声明) ...

  9. minihomepage.exe 百度视频迷你主页

    百度视频最近动作可真.延续"DHot.exe 热点资讯"之后,又在桌面上出现了Tips窗体,例如以下图: 尽管是迷你的,可还是把其他桌面图标给挡了啊! 突然出来这么个窗体.我还以为 ...

  10. WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示

    原文:WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示 为方便描述, 这里仅以正方形来做演示, 其他图形从略. 运行时效果图:XAML代码:// Transform.XAML< ...