用html5画地球椭圆绕太阳,玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)...
请珍惜小编劳动成果,该文章为小编原创,转载请注明出处。
关于运动速度的参数与真实速度有点差距,大家可以自行调整
地球绕着太阳转,月球绕着地球转
您的浏览器不支持canvas
//获取画布
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);
用html5画地球椭圆绕太阳,玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)...相关推荐
- 用html5画地球椭圆绕太阳,开玩笑html5(五岁以下儿童)---绕地球月球,地球绕太阳运动(canvas实现,同样可以移动哦)...
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 速度的參数与真实速度有点差距.大家能够自行调整 地球绕着太阳转,月球绕着地球转 您的浏览器不支持canvas //获取画布 var canva ...
- html5之太阳地球月球,使用html5画出地球月球和太阳之间的环绕关系
本文主要是描述了使用html5画出地球月球和太阳之间的环绕关系,其实他们比较简单,主要是通过旋转来控制各个之间的环绕关系!~ 输入代码,里面有注释: ------------------------- ...
- 玩转html5画图 - TimeLangoliers - 博客园
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
- 美防长来了,HTML5 画个星条旗(美国国旗)
美防长来了,不希望中国与美国在未来开战,HTML5 画个星条旗(美国国旗)祈祷. [img]http://dl2.iteye.com/upload/attachment/0095/8174/89e63 ...
- 玩转HTML5移动页面
(1) 动画雪碧图 涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)! 网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和G ...
- [html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
- c语言 椭圆,C语言画圆椭圆
C语言画圆椭圆 C语言画图实验代码,包含画直线,画圆,椭圆 #include "graphics.h" #include "conio.h" #include ...
- QQ空间玩吧HTML5游戏引擎使用比例分析
GameLook报道/"Cocos 2015开发者大会(春季)"于4月2日在国家会议中心圆满落下帷幕.在会上全新的3D编辑器,Cocos Runtime等产品重磅公布,给业界带来了 ...
- html5制作线路图,HTML5画一个简单呢好看的电路图
画图API的应用,线,圆等 最近特别忙,承蒙大伙关照,自己折腾着做了个HTML5画电路图 何问起 canvas画简单电路图 by 何问起 [相关推荐] 1. 特别推荐:"php程序员工具箱& ...
最新文章
- PIL图像处理:读取图像,显示图像,ROI,保存图像
- TabHost的使用(二):实现TabHost.TabContentFactory接口
- c语言 3个人比饭量大小,OpenJudge计算概论-比饭量【枚举法、信息数字化】
- ConcurrentHashMap的源码分析-为什么要做高低位的划分
- XDOJ-1002-小W的塔防(dp)
- web Server支持 perl
- Android系统集成app,Android系统集成第三方pre
- 不用IIS跑.net web应用
- Linux学习笔记B站狂神说(自己总结方便复习)
- 720nopenwrt设置打印服务器_TP-Link_TL-WR703N网络打印服务器
- Systrace 学习笔记
- CAS (5) —— Nginx代理模式下浏览器访问CAS服务器配置详解
- 如何利用PDF编辑软件将pdf文字修改
- 口袋之旅html5超强账号,《口袋之旅H5》攻略:各大排行榜冲榜攻略
- 手机内存卡大小的计算
- 电脑麦克风没有声音怎么办?如何恢复?(电脑麦克风没声音的解决方法)
- 生产环境和开发环境_环境部署:开发、测试和线上环境的区别
- excel标题行列浮动显示/冻结窗口
- Meltdown 论文翻译
- 刘振飞:互联网项目研发管理心得