html5使用canvas绘制太阳系效果

星球变量名公转周期光色暗色水星mercury87.70#a69697#5c3e40金星venus224.701.70#c4bbac#1f1315地球earth365.2422#78b1e8#050c12火星mars686.98#cec9b6#76422d木星jupiter4332.589#c0a48e#322土星saturn10759.95#f7f9e3#5c4553天王星uranus30799.095#a7e115#19243a海王星neptune60152.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,fal);

cxt.clopath();

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,fal);

cxt.clopath();

this.color=cxt.createra地震是怎样形成的dialgradi北京冬季奥运会ent(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&污染源自动监控设施运行管理办法gt; 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 mar导师推荐意见s(){//火星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

tinterval(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);