地球环绕 html5,玩转html5(五)---月球绕着地球转,地球绕着太阳转
关于运动速度的参数与真实速度有点差距,大家可以自行调整
地球绕着太阳转,月球绕着地球转
您的浏览器不支持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(五)---月球绕着地球转,地球绕着太阳转相关推荐
- 玩转HTML5移动页面
(1) 动画雪碧图 涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)! 网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和G ...
- 从零玩转HTML5+CSS3项目实战-跟着李南江学编程
从零玩转HTML5+CSS3项目实战-跟着李南江学编程 1.CSS高级应用 1.边框圆角的基本使用 1.1什么是边框圆角:将直角的边框变为圆角的边框 1.2边框圆角的格式:border-radius: ...
- HTML5+CSS3的学习(五)
HTML5+CSS3的学习(五) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
- html5图片邀请函,html5,邀请函.doc
html5,邀请函 html5,邀请函 看来HTML5的浪潮又要让我们的广告客户浑身湿透了.他们想要华丽的页面,想要让用户觉得他们很酷.事实上,即使他们只做了一张很廉价的"活动邀请函&quo ...
- html5大全,常用html5标签大全 - 小俊学习网
作为一名网页制作人员或者seo优化人员,不可不知的html5标签.万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,html5标准规范制 ...
- html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册
HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册. 超过2G 的 HTML5 视频教程免费分享,免费下载! 尚硅谷前端HTML5视频_HTML & CSS 核心基 ...
- html5知识点:HTML5新特性
最近几年web前端开发领域最热的话题当属HTML5,HTML5从根本上改变了开发商开发web应用的方式,从桌面浏览器到移动应用,这种语言和标准都正在影响并将继续影响着各种操作平台. 关于HTML5的介 ...
- html语义化的理解是什么,html5语义化,html5的语义化的理解
家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着臭爸爸;你让他把鞋穿上,他会提起鞋子往楼下扔在小孩的世界里,他虽然会说话,但不一定明白其中的意思,不能正确表达;同 ...
最新文章
- 轻雀协作客户最佳实践之A站
- 【Android】使用AIDL传递用户自定义类型数据--附完整示例代码
- HTTPS通信的C++实现
- 指针学习笔记(更新中)
- 真核转录组(denovo/resequencing)及案例分析
- 他受他爸影响,他爸受数学家影响,最终造出了自动旋转的房子!
- 基于spring自动注入及AOP的表单二次提交验证
- java的实现基础知识_Java基础知识
- 计算机应用基础工作页,计算机应用基础工作页
- NodeJS仿WebApi路由
- Maven 项目中配置私服
- centos/linux下的安装Nginx
- 计算某个目录下所有文件的MD5值
- Ubuntu下,curl 安装
- c语言读取三菱plc数据,使用用三菱小软件读取三菱PLC数据的方法
- 愚人节、物联网、飞鸽与IP
- ubuntu 下安装 qq wechat VirtualBox notepadqq
- 手绘与码绘————用代码表现出花瓣飞舞的效果
- 我的世界Java版中怎么改名_我的世界怎么改名字 付/免费改名字教程
- 定额人工费调整差额的几个解决方案
热门文章
- Python中str、list、numpy分片操作
- mysql怎么计算某个字段重复的个数_2020最新版MySQL数据库面试题(一)
- 鸢尾花识别问题,萼片有什么用?
- GPU和显卡是什么关系?GPU会取代CPU吗?GPU和显卡的区别是什么?
- python matplotlib.pyplot.scatter() 中的cmap参数是什么意思?
- PyQt、QtDesigner及其它工具包的安装
- Java进阶:ReentrantLock和Condition基本使用
- 哈希算法python_哈希算法(Python代码实现)
- 手写一个简单的线程池MyThreadPool
- jq定制上传按钮,选择文件就上传