这篇文章主要介绍了html5使用画布取代太阳系效果，需要的朋友可以参考下

 

    星球变量名公转周期光色暗色

 

    水星汞87.70＃a69697＃5c3e40

 

    金星金星224.701.70＃c4bbac＃1f1315

 

    地球地球365.2422＃78b1e8＃050c12

 

    火星火星686.98＃cec9b6＃76422d

 

    木星木星4332.589＃c0a48e＃322

 

    土星土星10759.95＃f7f9e3＃5c4553

 

    天王星天王星30799.095＃a7e115＃19243a

 

    海王星海王星60152.95＃0661b2＃1E3b73

 

    <canvasid=“canvas”width=“1000”height=“1000”style=“background-color：＃000;”></canvas>

 

    复制代码

 

    代码如下：

 

    varcanvas=document.getElementById（“canvas”）;varcxt=canvas.getContext（“2d”）;函数DrawTrack（）{for（vari=0;i<8;i++）{cxt.beginPath（）;cxt.arc（500,500，（i+1）*50,0,360，false）;cxt.closePath（）;cxt.strokeStyle=“＃fff”;cxt.stroke（）;}}函数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>函数Sun（）{//太阳1DrawStart.call（this，0,0,20,0，“＃f00”，“＃f90”）;}函数Mercury（）{//水星2DrawStart.call（this，0，-50,10,87.70，“＃A69697”，“＃5c3e40”）;}函数Venus（）{//金星3DrawStart.call（this，0，-100,10,224.71，“＃c4bbac”，“＃1f1315”）;}函数Earth（）{//地球4DrawStart.call（this，0，-150,10,365.224，“＃78b1e8”，“＃050c12”）;}函数Mars（）{//火星5DrawStart.call（this，0，-200,10,686.98，“

 

    函数Jupiter（）{//木星6DrawStart.call（this，0，-250,10,4332.589，“＃c0a48e”，“＃322”）;}函数Saturn（）{//土星7DrawStart.call（this，0，-300,10,10759.5，“＃f7f9e3”，“＃5c4533”）;}函数Uranus（）{//天王星8DrawStart.call（this，0，-350,10,30799.95，“＃a7e1e5”，“＃19243a”）;}函数Neptune（）{//天王星9DrawStart.call（this，0，-400,10,60152.95，“＃0661b2”，“＃1E3b73”）;}vars=newSun（）;//1varm=newMercury（）;//2varv=newVenus（）;//3vare=newEarth（）;//4varma=newMars（）;//5varj=newJupiter（）;

 

    varur=newUranus（）;//8varne=newNeptune（）;//9setInterval（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）;