用html5如何編寫星球運動,HTML5---Canvas-模拟地球-星球運作軌道

您的浏覽器不支援canvas标簽

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

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

var time=0;//聲明一個時間參數(1:1天)

function draw(){

cxt.clearRect(0,0,1000,1000); //清除畫布(清除之前的内容 重新畫)

//畫軌道,設定筆觸顔色

cxt.strokeStyle="#8D1C21";

cxt.beginPath();

cxt.arc(500,500,100,0,Math.PI*360,false);

cxt.closePath();

cxt.stroke();

//畫太陽

cxt.beginPath();

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

cxt.closePath();

var sunColor=cxt.createRadialGradient(500,500,0,500,500,20);//(内圓心x,内圓形y,内半徑,外圓心x,外圓心y,外半徑);

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

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

cxt.fillStyle=sunColor;//設定填充顔色(漸變色)

cxt.fill();

//畫地球

cxt.save();

cxt.translate(500,500);//設定一下異次元空間的0，0點

//cxt.rotate(90*Math.PI/190);

cxt.rotate(time*360/365*Math.PI/190);//地球公轉一周需要365天，time=1天 一天轉360/365度

//畫出地球

cxt.beginPath();

cxt.arc(0,-100,10,0,360,false);

cxt.closePath();

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

earthColor.addColorStop(0,'#78B1E8');

earthColor.addColorStop(1,'#050C12');

cxt.fillStyle=earthColor;

cxt.fill();

cxt.restore();

time+=1; //每畫一次圖像，時間參數加1

}

//使地球動起來

setInterval(draw,10);

效果：