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

<!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. Binders 与 Window Tokens(窗体令牌)

    原文地址:http://www.androiddesignpatterns.com/2013/07/binders-window-tokens.html 安卓的一项核心设计思想是希望能提供一个不须要依 ...

  2. AngularJs打造一个简易权限系统

    AngularJs打造一个简易权限系统 一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJ ...

  3. C语言函数参数压栈顺序为何是从右到左？（从左向右的话，碰到printf的会陷入死循环）

    上学期学习了汇编语言,并在操作系统实验中使用了汇编+C语言混合编程,中间也了解了一些C语言与汇编语言的对应关系. 由于汇编语言是底层的编程语言,各种函数参数都要直接控制栈进行存取,在混合编程中,要用汇 ...

  4. PHP网站安装程序的原理及代码

    原文:PHP网站安装程序的原理及代码 原理: 其实PHP程序的安装原理无非就是将数据库结构和内容导入到相应的数据库中,从这个过程中重新配置连接数据库的参数和文件,为了保证不被别人恶意使用安装文件,当安 ...

  5. JavaScript之面向对象1

    学习过Java程序的开发人员都知道面向对象是怎么回事. 面向对象无非就是封装.多态.继承 比如: 声明一个类: class Person{ //私有成员 private String name; pr ...

  6. JMS学习（三）ActiveMQ Message Persistence（转）

    1,JMS规范支持两种类型的消息传递:persistent and non-persistent.ActiveMQ在支持这两种类型的传递方式时,还支持消息的恢复.中间状态的消息(message are ...

  7. drupal form 中图片上传

    1.创建url 链接到form $items['qianfeng/add'] = array(     'title' => t('加入信息'),     'page callback' =&g ...

  8. poj 动态规划的主题列表和总结

    此文转载别人,希望自己可以做完这些题目. 1.POJ动态规划题目列表 easy:1018, 1050, 1083, 1088, 1125, 1143, 1157, 1163, 1178, 1179, ...

  9. 【Qt for Android】OpenGL ES 绘制彩色立方体

    Qt 内置对OpenGL ES的支持.选用Qt进行OpenGL ES的开发是很方便的,很多辅助类都已经具备.从Qt 5.0開始添加了一个QWindow类,该类既能够使用OpenGL绘制3D图形,也能够 ...

  10. Android清理设备内存具体完整演示样例(一)

    MainActivity例如以下: package come.on; import android.app.Activity; import android.content.Context; impo ...