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

<!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. Windows查看进程taskList,终止进程tskill

    TaskList:         列出当前所有运行进程.         使用方法:在命令提示符中输入tasklist 然后回车,会看到类似下面的列表: 映像名称                   ...

  2. C++异常中的堆栈跟踪

    C++语言的运行时环境是基于栈的环境,堆栈跟踪(trace stack)就是程序运行时能够跟踪并打印所调用的函数.变量及返回地址等,C++异常中的堆栈跟踪就是当程序抛出异常时,能够把导致抛出异常的语句 ...

  3. iOS视图控制器之间delegate传值教程

    之前在StackOverFlow上看到一篇讲传值(segue传值和delegate传值)的文章,感觉讲的非常清晰,就将delegate部分翻译了一下.有兴趣能够看看. 原文: http://stack ...

  4. Python使用heapq实现小顶堆（TopK大）、大顶堆（BtmK小）

    Python使用heapq实现小顶堆(TopK大).大顶堆(BtmK小) | 四号程序员 Python使用heapq实现小顶堆(TopK大).大顶堆(BtmK小) 4 Replies 需1求:给出N长 ...

  5. 在Windows如何解决下Cocos2d-x示例代码TestCpp我找不到lib问题库文件

    遇到此问题,首先确定失踪的库文件,然后找到文件夹,库文件. 在编制Cocos2d-x在TestCpp工程,提示缺少lib文件,共同拥有下面2种可靠解决方式: 1.在Cocos2d-x的根文件夹Debu ...

  6. 杭电acm阶段之理工大版

    想參加全国软件设计大赛C/C++语言组的同学,假设前一篇<C和指针课后练习题总结>没看完的,请先看完而且依照上面的训练做完,然后做以下的训练. 传送门:http://blog.csdn.n ...

  7. android圆角View实现及不同版本号这间的兼容

    在做我们自己的APP的时候.为了让APP看起来更加的好看,我们就须要将我们的自己的View做成圆角的,毕竟主流也是将非常多东西做成圆角.和苹果的外观看起来差点儿相同,看起来也还不错. 要将一个View ...

  8. java读取XML文件的四种方式

    java读取XML文件的四种方式 Xml代码 <?xml version="1.0" encoding="GB2312"?> <RESULT& ...

  9. poj1849（求树的直径）

    题目链接:http://poj.org/problem?id=1849 题意:有一颗n个结点的带权的无向树, 在s结点放两个机器人, 这两个机器人会把树的每条边都走一遍, 但是最后机器人不要求回到出发 ...

  10. Linux内核——进程管理与调度

    进程的管理与调度 进程管理 进程描写叙述符及任务结构 进程存放在叫做任务队列(tasklist)的双向循环链表中.链表中的每一项包括一个详细进程的全部信息,类型为task_struct,称为进程描写叙 ...