關于運動速度的參數與真實速度有點差距，大家可以自行調整

地球繞著太陽轉，月球繞著地球轉

您的瀏覽器不支持canvas

//獲取畫布

var canvas=document.getElementById('canvas');

//獲取繪圖環境

var cxt=canvas.getContext('2d');

//d單位時間time (1:1天)

var time=0;

function draw(){

//清除畫布

cxt.clearRect(0,0,600,600);

//畫地球軌道

cxt.strokeStyle="#FFF";

cxt.beginPath();

//路徑函數

cxt.arc(300,300,180,0,360,false);

cxt.closePath();

cxt.stroke();

//畫太陽

cxt.beginPath();

//路徑函數 x,y,r,角度范圍,順時針/逆時針

cxt.arc(300,300,20,0,360,false);

cxt.closePath();

//填充(漸變色)

//cxt.createLinearGradient(內圓心x,內圓心y，內半徑r,外圓心x，外圓心y，外圓半徑r);

var sunColor=cxt.createRadialGradient(300,300,0,300,300,10);

sunColor.addColorStop(0,"#F00");

sunColor.addColorStop(1,"#F90");

cxt.fillStyle=sunColor;

cxt.fill();

//畫地球

cxt.save();

//異次元空間00點

cxt.translate(300,300);

//旋轉角度,地球公轉一周需要365天，time=1轉365/360度

cxt.rotate(time*365/360*Math.PI/180);

//畫球

cxt.beginPath();

cxt.arc(180,0,10,0,360,false);

var earthColor=cxt.createRadialGradient(180,0,0,180,0,10);

cxt.strokeStyle="#050c12";

earthColor.addColorStop(0,"#78B1Eb");//#&8B1Eb

earthColor.addColorStop(1,"#050c12");//#050c12

cxt.fillStyle=earthColor;

cxt.fill();

cxt.closePath();

//畫月球軌道和月球

cxt.save();

/* 異次元空間00點,在前邊的基礎上，畫地球時以(300,300)為中心，且未退出異次元空間

月球軌道以地球為中心，在異次元空間，地球為(180,0)，這個地方我寫錯了，改了兩個小時才改好 */

cxt.strokeStyle="#FFF";

cxt.translate(180,0);

//畫月球軌道

cxt.beginPath();

cxt.arc(0,0,30,0,360,false);

cxt.stroke();

cxt.closePath();

//畫月球

cxt.rotate(time*365*Math.PI/180);

cxt.beginPath();

cxt.arc(30,0,5,0,360,false);

var moonColor=cxt.createRadialGradient(30,0,0,30,0,5);

cxt.strokeStyle="#322222";

moonColor.addColorStop(0,"#c0a48e");

moonColor.addColorStop(1,"#322222");

cxt.fillStyle=moonColor;

cxt.fill();

cxt.closePath();

cxt.restore();

cxt.restore();

//每畫一次圖像，時間參數加1

time+=1;

}

draw();

//通過修改第二個參數課調整速度

setInterval(draw,50);

總結

以上是生活随笔為你收集整理的地球环绕 html5,玩转html5(五)---月球绕着地球转，地球绕着太阳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。