您的位置：首页 > Web前端 > HTML5

html5 太阳系（2）

2016-02-10 10:41 513 查看

<!DOCTYPE html>
<html>
<head>
<title>银行系</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="mycanvas" width="1000" height="1000" style="background: #000;"></canvas>
<script>
var canvas = document.getElementById('mycanvas');
var cxt = canvas.getContext("2d");
cxt.strokeStyle="white";
//画轨道
function track() {
for (var i = 0; i < 8; i++) {
cxt.beginPath();
cxt.arc(500,500,(i+1)*50,0,360,false);
cxt.closePath();
cxt.stroke();
}
}
track();

//画星体(此处的x,y是以(500,500)为原点的)
function Star(x,y,r,cycle,scolor,ecolor) {
this.x = x;
this.y = y;
this.r = r;
this.cycle = cycle; //公转周期
this.scolor = scolor; //设置渐变色
this.ecolor = ecolor;
this.color = null;
this.time = 0;//设计一个计时器，注意本程序中time的位置
//转动画布
this.draw = function () {

cxt.save();
this.color = cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
this.color.addColorStop(0,this.scolor);
this.color.addColorStop(1,this.ecolor);
cxt.fillStyle = this.color;
cxt.translate(500,500);
cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
cxt.beginPath();//注意这里要清除之前的路径
cxt.arc(this.x,this.y,this.r,0,360,false);//此处球体的位置要变化
cxt.closePath();
cxt.fill();
cxt.restore();
this.time+=1;

}

}

//画太阳
function Sun() {
Star.call(this,0,0,20,0,"#f00","#f90");

}
//画水星
function Mercury(){
Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
}
//画金星
function Venus(){
Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");

}
//画地球
function Earth(){
Star.call(this,0,-150,10,365,"#78B1E8","#050C12");
}
//画火星
function Mars(){
Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");
}

//画木星
function Jupiter() {
Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");
}
//画土星
function Saturn() {
Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");
}
//画天王星
function Uranus() {
Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");
}
//画海王星
function Neptune(){
Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");
}
var sun = new Sun();
var shuixing = new Mercury();
var jinxing = new Venus();
var diqiu = new Earth();
var huoxing = new Mars();
var muxing = new Jupiter();
var tuxing = new Saturn();
var tianwangxing = new Uranus();
var haiwangxing = new Neptune();
function move() {
cxt.clearRect(0,0,1000,1000);
track();
sun.draw();
shuixing.draw();
jinxing.draw();
diqiu.draw();
huoxing.draw();
muxing.draw();
tuxing.draw();
tianwangxing.draw();
haiwangxing.draw();
}

setInterval(move,10);

</script>
</html>

运行结果：

太阳系星球参考指标：

星球英文名公转周期光色暗色

水星 Mercury 87.70 天 #A69697 #5C3E40

金星 Venus 224.701天 #C4BBAC #1F1315

地球 Earth 365.2422天 #78B1E8 #050C12

火星 Mars 686.98 日 #CEC9B6 #76422D

木星 Jupiter 4332.589天 #C0A48E #322222

土星 Saturn 10759.5 天 #F7F9E3 #5C4533

天王星 Uranus 30799.095日 #A7E1E5 #19243A

海王星 Neptune 164.8*365天 #0661B2 #1E3B73

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航