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

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

<!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. Oracle基础（五）pl/sql进阶(分页过程)

    编写分页过程         通过pl/sql实现分页过程,再该过程中由简单到难一步步深入,目的在于通过该案例熟悉pl/sql的各种存储过程,包,游标.怎样在java中调用等内容的学习. 1.无返回值 ...

  2. Java整型数组的最大长度到底有多长？

    Java整型数组的最大长度到底有多长? 今天上网查了一下,各种说法都有,这个问题似乎总困扰我们Java初学者,无奈,只好自己试了一下,以下是我的测试代码,如果有错误,还望不吝赐教! 使用eclipse ...

  3. POJ 2536 Gopher II（二分图的最大匹配）

    题目链接:http://poj.org/problem?id=2536 题意:已知有n仅仅老鼠的坐标,m个洞的坐标,老鼠的移动速度为V,S秒以后有一仅仅老鹰要吃老鼠,问有多少个老鼠被吃. 非常明晰,二 ...

  4. Xamarin.Android中使用android:onClick="xxx"属性

    原文:Xamarin.Android中使用android:onClick="xxx"属性 在原生Android开发中,为一个View增加点击事件,有三种方式: 1.使用匿名对象 ( ...

  5. Android在发送带有附件的邮件

    准备好工作了-下载最新的版本号JMail https://java.net/projects/javamail/pages/Home#Download_JavaMail_1.5.2_Release h ...

  6. Drupal 7 模 .info 文件描述

    Drupal使用.info文件以节省话题(theme)和模块(modules)基本数据(metadata). 编码:推荐使用UTF-8.这是一个没有BOM(Byte Order Mark). 下面是一 ...

  7. Android定位功能

    不说废话,直接说说实现android定位有关的API吧. 这些API都在android.location包下,一共有三个接口和八个类.它们配合使用即可实现定位功能. 三个接口: GpsStatus.L ...

  8. 【原创】leetCodeOj --- Binary Search Tree Iterator 解题报告

    时间挤挤总是有的 太久不做题,脑子都生锈了.来道水题练练手 题目地址: https://leetcode.com/problems/binary-search-tree-iterator/ 题目内容: ...

  9. 使用X264编码yuv格式的视频帧使用ffmpeg解码h264视频帧

    前面一篇博客介绍在centos上搭建点击打开链接ffmpeg及x264开发环境.以下就来问个样例: 1.利用x264库将YUV格式视频文件编码为h264格式视频文件 2.利用ffmpeh库将h264格 ...

  10. 玩转Web之easyui(三)-----easy ui dataGird 重新指定url以获取不同数据源信息

    如果已经写了一个dataGird并且已经通过url绑定数据源,能不能在其他地方改变url使其从不同数据源获取信息,从而实现查询等操作?答案当然是肯定的,而且仅需要几行代码 $('#btnq').bin ...