今天研究的是利用HTML5的Canvas畫圖來模擬太陽系運轉，首先，在這個太陽系裡分為畫軌道和畫星球兩個部分，對於每一個星球我們要知道它的顏色和公轉周期，如下圖。
采用面向對象編程的思想，代碼如下：
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<canvas id="canvas" width="1000" height="1000" >
你的浏覽器不支持canvas標簽！
</canvas>
<script>
//設置2d繪圖環境
var ctx = document.getElementById("canvas").getContext("2d");
//畫軌道
function drawTrack(){
for(var i=0;i<8;i++){
ctx.beginPath();
ctx.arc(500,500,(i+1)*50,0,360,false);
ctx.closePath();
ctx.strokeStyle = "#fff";
ctx.stroke();
}
}
drawTrack();
//畫星球
function Star(x,y,radius,cycle,sColor,eColor){
//星球需要哪些屬性
//星球的坐標點
this.x = x;
this.y = y;
//星球的半徑
this.radius = radius;
//設置周期
this.cycle = cycle;
//星球的顏色，起始顏色和結束顏色
this.sColor = sColor;
this.eColor = eColor;
this.color = null;
//設置一個計時器
this.time = 0;
this.draw = function(){
//保存之前的內容
ctx.save();
//重置0，0坐標
ctx.translate(500,500);
//旋轉角度
ctx.rotate(this.time*(360/this.cycle)*Math.PI/180);
//畫星球
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,360,false);
ctx.closePath();
//設置星球的填充顏色
this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
this.color.addColorStop(0,this.sColor);
this.color.addColorStop(1,this.eColor);
ctx.fillStyle = this.color;
ctx.fill();
//恢復之前畫布的內容
ctx.restore();
this.time += 1;
}
}
//創建一個太陽的構造函數
function Sun(){
Star.call(this,0,0,20,0,"#FFFF00","#FF9900");
}
//創建一個水星的構造函數
function Mercury(){
Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
}
//創建一個金星的構造函數
function Venus(){
Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");
}
//創建一個地球的構造函數
function Earth(){
Star.call(this,0,-150,10,365.2422,"#78B1E8","#050C12");
}
//創建一個火星的構造函數
function Mars(){
Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");
}
//創建一個木星的構造函數
function Jupiter(){
Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");
}
//創建一個土星的構造函數
function Saturn(){
Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");
}
//創建一個天王星的構造函數
function Uranus(){
Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");
}
//創建一個海王星的構造函數
function Neptune(){
Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");
}
var sun = new Sun();
var mercury = new Mercury();
var venus = new Venus();
var earth = new Earth();
var mars = new Mars();
var jupiter = new Jupiter();
var saturn = new Saturn();
var uranus = new Uranus();
var neptune = new Neptune();
function Move(){
ctx.clearRect(0,0,1000,1000);
drawTrack();
sun.draw();
mercury.draw();
venus.draw();
earth.draw();
mars.draw();
jupiter.draw();
saturn.draw();
uranus.draw();
neptune.draw();
}
setInterval(Move,10);
</script>
</body>
</html>
運行效果：
--------------------------------------分割線 --------------------------------------
HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm
HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm
HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm
HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm
HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm
《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm
關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm
HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm
--------------------------------------分割線 --------------------------------------