关于运动速度的参数与真实速度有点差距，大家可以自行调整

<!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. 开玩笑html5(五岁以下儿童)---绕地球月球，地球绕太阳运动（canvas实现，同样可以移动哦）

    请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 速度的參数与真实速度有点差距.大家能够自行调整 <!DOCTYPE html> <html> <head> ...

  2. 玩转HTML5移动页面

    (1) 动画雪碧图涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)!网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gul ...

  3. 玩转HTML5移动页面(动效篇)(转载)

    本文转载自: 玩转HTML5移动页面(动效篇)

  4. 玩转HTML5移动页面(优化篇)

    原文:http://www.grycheng.com/?p=472 承接上文<玩转HTML5移动页面(动效篇)>,上次说的是让页面动起来的一些小技巧.而页面动起来的根基是功能可用的页面,因 ...

  5. 玩转HTML5移动页面(动效篇)

    原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...

  6. 玩转HTML5移动页面（优化篇）

    标签:h5 页面优化收藏 热门分享 网页设计师必备的 酷站收藏网站 2013年不容错过的app ui素材 40个漂亮的扁平化网页设计欣赏 国内网页设计公司网站欣赏 55套网页设计常用的psd格式UI ...

  7. 用前端姿势玩docker【五】快速构建中类Unix系统与Windows系统的差异化处理

    目录 用前端姿势玩docker[一]Docker通俗理解常用功能汇总与操作埋坑 用前端姿势玩docker[二]dockerfile定制镜像初体验 用前端姿势玩docker[三]基于nvm的前端环境构建 ...

  8. QQ空间玩吧HTML5游戏引擎使用比例分析

    GameLook报道/“Cocos 2015开发者大会(春季)”于4月2日在国家会议中心圆满落下帷幕.在会上全新的3D编辑器,Cocos Runtime等产品重磅公布,给业界带来了Cocos这款国产引 ...

  9. HTML5五种客户端离线存储方案

    最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...

随机推荐

  1. python转换时间戳和日期时间格式的转换

    [steven@txzxp2 seccenter]$ python Python 2.7.5 (default, Jul  8 2013, 09:48:59)  [GCC 4.8.1 20130603 ...

  2. 模仿《百度音乐HD》添加到下载框动画

    上次听有人说喜欢<百度音乐HD>添加到下载动画 ,我就尝试模仿了下,没想到,今天code4app(地址)也有了这个,但是 这个动画基本相同,我们的思路还是部一样的. 都可以参考 .主要关键 ...

  3. Hbase0.96源码之HMaster(一)

    从main()函数開始 public static void main(String [] args) { VersionInfo.logVersion(); new HMasterCommandLi ...

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

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

  5. 基于Grunt的版本号构建系统新手教程

    作者:zhanhailiang 日期:2014-10-12 1. 安装nodejs,npm,grunt-cli.參见<Windows环境下安装nodejs+npm+grunt-cli工具> ...

  6. POJ 2002 点hash

    Squares Time Limit: 3500MS   Memory Limit: 65536K Total Submissions: 15489   Accepted: 5864 Descript ...

  7. js:进一步关闭（范围：下一个）

    function fn1(){   //创建一个数组   var fns = new Array();   //i这个变量是保存在fn1这个作用域中   for(var i=0;i<10;i++ ...

  8. Python的TkinterButton做为父窗口

    #-*-coding:utf--*- import Tkinter,time,tkMessageBox,sys,BeBigModule class MainFrame: def __init__(se ...

  9. U10vim程序编辑器

    vim需要多加练习． 1.你可以将vim视为vi的高级版本．vi分成三种模式:一般模式,编辑模式和命令行模式． 一般模式:以vi打开一个文件就直接进入一般模式了(这也是默认的模式)．在这个模式中,你可 ...

  10. Lua 与C 交换 第一篇

    编译 windows上编译lua源代码 cl /MD /O2 /W3 /c /DLUA_BUILD_AS_DLL *.c del *.o ren lua.obj lua.o ren luac.obj ...