HTML5 canvas繪製太陽系
看了好多canvas繪製太陽系行星，他們都忽略了月亮，雖然月亮不是行星，但是繪圖少了月亮也就沒有挑戰性了，今天我就計算了一下月亮的軌跡，然後按照公轉的比例畫了上去，首先看一下效果：
接下來是項目的說明書和標準：
根據以上的效果和要求，我們寫出的代碼爲：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sun</title>
<style type="text/css">
#canvas{display: block;background-color:#000;margin:0 auto;}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext('2d');
var time = 0;
var EarchRotate = 0;
var MoonX = 0;
var MoonY = 0;
//行星軌道
function starRoute(){
for(var i=0; i<=8; i++){
cxt.save();
cxt.translate(500,500);
cxt.strokeStyle = '#fff';
cxt.beginPath();
cxt.arc(0,0,i*55,0,2*Math.PI,false);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
}
//創建Start類型(其實在js中是對象)
function Star(name,x,y,r,startColor,endColor,revolution){
this.name = name; //星球名稱
this.x = x; //圓心 x,y
this.y = y;
this.r = r; //半徑 r
this.startColor = startColor; //漸變 start,end
this.endColor = endColor;
this.revolution = revolution;//公轉週期 revolution
}
Star.prototype = {
constructor : Star,
drawStar : function(){
cxt.save();
cxt.translate(500,500);
//繪製漸變顏色
var gradient = cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
gradient.addColorStop(0,this.startColor);
gradient.addColorStop(1,this.endColor);
cxt.fillStyle = gradient;
cxt.beginPath();
if(this.name == '地球'){
//存儲轉動的角度,找到moon的旋轉座標
EarchRotate = time*360/this.revolution*Math.PI/180;
MoonX = 165*Math.sin(EarchRotate);
MoonY = -165*Math.cos(EarchRotate);
cxt.rotate(time*360/this.revolution*Math.PI/180);
cxt.arc(this.x,this.y,this.r,0,2*Math.PI,false);
cxt.fill();
}else if(this.name == '月球'){
cxt.save();
cxt.translate(MoonX,MoonY); //重置原點，即設置月球旋轉中心
//月球旋轉軌跡
cxt.beginPath();
cxt.strokeStyle = 'rgba(207,207,207,0.2)';
cxt.arc(0,0,30,0,2*Math.PI,false);
cxt.stroke();
cxt.closePath();
//月球圓心座標
var x = 30*Math.cos((time*360/this.revolution-90)*Math.PI/180);
var y = 30*Math.sin((time*360/this.revolution-90)*Math.PI/180);
cxt.rotate(time*360/this.revolution*Math.PI/180);
//月球的漸變顏色
var gradientM = cxt.createRadialGradient(x,y,0,x,y,this.r);
gradientM.addColorStop(0,this.startColor);
gradientM.addColorStop(1,this.endColor);
cxt.fillStyle = gradientM;
//繪製月球
cxt.beginPath();
cxt.arc(x,y,this.r,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
cxt.restore();
}else{
cxt.rotate(time*360/this.revolution*Math.PI/180);
cxt.arc(this.x,this.y,this.r,0,2*Math.PI,false);
cxt.fill();
}
cxt.closePath();
cxt.restore();
//加上字體
cxt.save();
cxt.translate(500,500);
cxt.fillStyle = '#fff';
cxt.font = "bold " + 0.9*this.r + "px Arial";
cxt.textAlign = "center";
cxt.textBaseline = "middle";
// cxt.rotate(time*360/this.revolution*Math.PI/180)
if(this.name=='太陽'){
cxt.fillText(this.name,this.x,this.y);
}else if(this.name=='月球'){
cxt.fillText('',this.x,this.y); //月球太小，字體不顯示
}else{
cxt.fillText(this.name,this.x+50,this.y);
}
cxt.restore();
}
}
function moveStar(){
cxt.clearRect(0,0,1000,1000); //首先清除畫布
starRoute();
var Sun = new Star('太陽',0,0,25,'#ffff00','#ff9900',0);
var Mercury = new Star('水星',0,-55,8,'#a69697','#5c3e40',87.70); //水星
var Venus = new Star('金星',0,-110,13,'#c4bbac','#1f1315',224.701); //金星
var Earth = new Star('地球',0,-165,18,'#78b1e8','#050c12',365.2422); //地球
var Moon = new Star('月球',0,-195,6,'#a69697','#5c3e40',27.32); //月球
var Mars = new Star('火星',0,-220,10,'#cec9b6','#76422d',686.98); //火星
var Jupier = new Star('木星',0,-275,25,'#c0a48e','#322222',4332.589); //木星
var Saturn = new Star('土星',0,-330,23,'#f7f9e3','#5c4533',10759.5); //土星
var Uranus = new Star('天王星',0,-385,20,'#a7e1e5','#19243a',30799.095); //天王星
var Neptune = new Star('海王星',0,-440,20,'#0661b2','#1e3b73',60152); //海王星
Sun.drawStar();
Mercury.drawStar();
Venus.drawStar();
Earth.drawStar();
Moon.drawStar();
Mars.drawStar();
Jupier.drawStar();
Saturn.drawStar();
Uranus.drawStar();
Neptune.drawStar();
time++;
}
setInterval(moveStar,100)
</script>
</html>