html5做的太阳系
效果圖：
源代碼：
?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background-color:black">
你的瀏覽器不支持canvas
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext('2d');
//軌道
function drawTrack(){
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.strokeStyle="white";
cxt.arc(500,500,(i+1)*50,0,360,false);
cxt.stroke();
cxt.closePath();
}
}
drawTrack();
//星球
function Star(x,y,radius,cycle,scolor,ecolor){
//畫出星球需要哪些屬性
//星球的坐標點
this.x=x;
this.y=y;
//星球的半徑
this.radius=radius;
//公轉周期
this.cycle=cycle;
//星球的顏色
this.scolor=scolor;
this.ecolor=ecolor;
//新建一個漸變顏色空對象
this.color=null;
this.time=0;
//設置一個計時器
this.draw=function(){
cxt.save();
//重置0.0坐標點
cxt.translate(500,500);
//設置旋轉角度
cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
cxt.beginPath();
cxt.strokeStyle="white";
cxt.arc(this.x,this.y,this.radius,0,360,false);
//設置星球顏色
//設置漸變顏色
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.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.224,"#78b1e8","#050c12");
}
function Mars(){
Star.call(this,0,-200,10,686.98,"#cec9b6","#76422d");
}
function Jupiter(){
Star.call(this,0,-250,10,686.98,"#c0a48e","#322222");
}
function Satrun(){
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 Mercury=new Mercury();
var Venus=new Venus();
var Earth=new Earth();
var Mars=new Mars();
var Jupiter=new Jupiter();
var Satrun=new Satrun();
var Uranus=new Uranus();
var Neptune=new Neptune();
function move(){
//清除畫布
cxt.clearRect(0,0,1000,1000);
//畫出軌道
drawTrack();
sun.draw();
Mercury.draw();
Venus.draw();
Earth.draw();
Mars.draw();
Jupiter.draw();
Satrun.draw();
Uranus.draw();
Neptune.draw();
}
//使各星球進行運動
setInterval( move,10);
</script>
</body>
</html>
轉載于:https://www.cnblogs.com/cjh1/p/6617676.html
總結
以上是生活随笔為你收集整理的html5做的太阳系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 查看Linux进程CPU过高具体的线程堆
- 下一篇： 转载 雨松mono Unity获