html5使用canvas绘制太阳系效果


Posted in HTML / CSS onDecember 15, 2014

星球 变量名 公转周期 光色 暗色
水星 Mercury 87.70 #a69697 #5c3e40
金星 Venus 224.701.70 #c4bbac #1f1315
地球 Earth 365.2422 #78b1e8 #050c12
火星 Mars 686.98 #cec9b6 #76422d
木星 Jupiter 4332.589 #c0a48e #322
土星 Saturn 10759.95 #f7f9e3 #5c4553
天王星 Uranus 30799.095 #a7e115 #19243a
海王星 Neptune 60152.95 #0661b2 #1E3b73

<canvas id="canvas" width="1000" height="1000" style="background-color: #000;"></canvas>

复制代码
代码如下:

var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");

function DrawTrack(){
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.arc(500,500,(i+1)*50,0,360,false);
cxt.closePath();
cxt.strokeStyle="#fff";
cxt.stroke();
}
}
function DrawStart(x,y,radius,cycle,sColor,eColor){
//画出星球需要哪些属性

//星球的坐标点
this.x=x;
this.y=y;
//星球的半径
this.radius=radius;
//星球的颜色(开始色,结束色)
this.sColor=sColor;
this.eColor=eColor;
//创建一个渐变色空对象
this.color=null;
this.time=0;
//公共周期
this.cycle=cycle;
this.draw=function(){
cxt.save();
cxt.translate(500,500);
//设置旋转角度
cxt.rotate(this.time*360/this.cycle*Math.PI/180);
cxt.beginPath();
cxt.arc(this.x,this.y,this.radius,0,360,false);
cxt.closePath();
this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
this.color.addColorStop(0,this.sColor);
this.color.addColorStop(1,this.eColor);
cxt.fillStyle=this.color;
cxt.fill();
cxt.restore();
this.time+=1;
}
}</p> <p> function Sun(){//太阳1
DrawStart.call(this,0,0,20,0,"#f00","#f90");
}
function Mercury(){//水星2
DrawStart.call(this,0,-50,10,87.70,"#A69697","#5c3e40");
}
function Venus(){//金星3
DrawStart.call(this,0,-100,10,224.71,"#c4bbac","#1f1315");
}
function Earth(){//地球4
DrawStart.call(this,0,-150,10,365.224,"#78b1e8","#050c12");
}
function Mars(){//火星5
DrawStart.call(this,0,-200,10,686.98,"#cec9b6","#76422d");
}
function Jupiter(){//木星6
DrawStart.call(this,0,-250,10,4332.589,"#c0a48e","#322");
}
function Saturn(){//土星7
DrawStart.call(this,0,-300,10,10759.5,"#f7f9e3","#5c4533");
}
function Uranus(){//天王星8
DrawStart.call(this,0,-350,10,30799.95,"#a7e1e5","#19243a");
}
function Neptune(){//天王星9
DrawStart.call(this,0,-400,10,60152.95,"#0661b2","#1E3b73");
}

var s=new Sun();//1

var m=new Mercury();//2
var v=new Venus();//3
var e=new Earth();//4
var ma=new Mars();//5
var j=new Jupiter();//6
var sa=new Saturn();//7
var ur=new Uranus();//8
var ne=new Neptune();//9

setInterval(function(){
cxt.clearRect(0,0,1000,1000);
DrawTrack();
s.draw();
m.draw();
v.draw();
e.draw();
ma.draw();
j.draw();
sa.draw();
ur.draw();
ne.draw();
},10);

html5使用canvas绘制太阳系效果

HTML / CSS 相关文章推荐
CSS3轻松实现圆角效果
Nov 09 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 #HTML / CSS
html5使用canvas画三角形
Dec 15 #HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 #HTML / CSS
html5使用canvas画一条线
Dec 15 #HTML / CSS
html5绘制时钟动画
Dec 15 #HTML / CSS
html5的canvas方法使用指南
Dec 15 #HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 #HTML / CSS
You might like
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php使用codebase生成随机数
2014/03/25 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
js快速排序的实现代码
2013/12/08 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
Python实现查找系统盘中需要找的字符
2015/07/14 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python写一个随机点名软件的实例
2019/11/28 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
网游商务专员求职信
2013/10/15 职场文书
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
一个都不能少观后感
2015/06/04 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers