html5怎么使用画布重新排列太阳系效果

这篇文章给大家分享的是有关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

代码如下：

    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;}}
函数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）;

感谢各位的阅读！关于"html5怎么使用画布重新排列太阳系效果"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！