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

    <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）;

感謝各位的閱讀！關于“html5怎么使用畫布重新排列太陽系效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！