canvas繪製太陽系

學習canvas有一段時間了，順便寫個小專案練手，該專案用到的知識點包括：

es6物件導向

基本的三角函式

canvas部分有：座標變換，漸變，混合模式，線條和圖形的繪製。

實際效果: solar system(推薦在chrome或safari下執行)

首先建立場景類，主要用來組織管理物件，統一更新和繪製物件。這裡用到了es6的類語法，建構函式建立物件列表屬性planets，繪製背景方法drawbg，使用requestanimationframe反覆執行的動畫方法animate

繪製背景使用到了徑向漸變：createradialgradient(x1,y1,r1,x2,y2,r2); 該漸變主要用於建立兩個圓相交過渡效果，如果前後兩個圓心相同(x1x2 && y1y2)，則會構造同心圓樣式的漸變。這樣我們就以太陽為中心的黃色調漸變到黑色，最後用fillrect填充整個背景。

//場景
class stage 
init(ctx)
//繪製背景
drawbg(ctx)
//執行動畫
animate(ctx));
requestanimationframe(run);
}());
}}

然後建立星球基類，除建構函式，還有更新位置角度的方法update，物件繪製方法draw。之後所有的星球，都會初始化該類或者繼承該類建立對應星球。

行星繞太陽做圓周運動，這個可以用三角函式根據角度和半徑求出x,y，但還有更加方便的方法，那就是使用canvas提供的座標旋轉方法rotate，以360度為乙個週期。

/**
* 星球基類
*/class planet x x座標
* @param y y座標
* @param r 半徑
* @param duration 週期(秒)
* @param fillstyle 
* @param blurstyle 
*/constructor(x,y,r,duration,fillstyle,blurstyle)
update(starttime)
draw(ctx)
};

開始建立第乙個物件-太陽，繼承上面的星球基類planet，重寫draw方法

/**
* 太陽
*/class sun extends planet
}

土星有美麗的土星環，所以也繼承出乙個單獨的類，重寫draw方法，其中土星環比較麻煩，建立了很多顏色節點的徑向漸變。

/**
* 土星
*/class saturn extends planet
}

接著開始初始化星球物件，包括太陽和八大行星，然後所有的星球顏色都使用了徑向漸變，這樣更加的美觀。這裡給出太陽，水星，土星的例子，其他的行星如此類推。

// 初始化場景類
var stage=new stage();
// sun
var sunstyle=ctx.createradialgradient(0,0,0,0,0,60);
sunstyle.addcolorstop(0,'white');
sunstyle.addcolorstop(0.5,'white');
sunstyle.addcolorstop(0.8,'#ffca1e');
sunstyle.addcolorstop(1,'#b4421d');
var sun=new sun(0,0,60,0,sunstyle,);
stage.planets.push(sun);
// mercury
var mercurystyle=ctx.createradialgradient(100,0,0,100,0,9);
mercurystyle.addcolorstop(0,'#75705a');
mercurystyle.addcolorstop(1,'#464646');
var mercury=new planet(100,0,9,8.77,mercurystyle,);
stage.planets.push(mercury);
//saturn 
var saturnstyle=ctx.createradialgradient(500,0,0,500,0,26);
saturnstyle.addcolorstop(0,'#f2e558');
saturnstyle.addcolorstop(1,'#4c4a3b');
var saturn =new saturn(500,0,26,1075.995,saturnstyle,);
stage.planets.push(saturn);

當然還有火星和木星之間的小行星帶，同理繼承星球基類，這裡用到了影象混合模式globalcompositeoperation，使用xor可以和背景對比度沒那麼突兀。當然還有其他屬性值，比如source-over, lighter等。這裡我們隨機生成了300個物件，一樣填充進場景類的planets屬性統一更新繪製。

/**
* 小行星
*/class asteroid extends planet
}function createasteroids());
stage.planets.push(asteroid);
}}

基本快完成了，但我們除此之外，可以再新增做橢圓運動的彗星，這樣更加酷。一樣隨機生成20個彗星填充進場景類統一更新繪製。

/**
* 彗星
*/class comet 
update(starttime)
draw()
}function createcomets()
}

最後的細節，就是標識出行星圓周運動的軌道，當然最簡單的是按運動半徑畫個圓。但我們用線性漸變新增好看的尾跡，這樣效果更好

function drawcircle(r,color)

所有的部分都已經完成，我們只需要啟動場景類即可

createasteroids();
createcomets();
stage.init(ctx);

canvas繪製太陽系

CSS 繪製太陽系行星執行軌跡

太陽系相關知識

利用OpenGL模擬太陽系

canvas繪製太陽系

CSS 繪製太陽系行星執行軌跡

太陽系相關知識

利用OpenGL模擬太陽系

相關推薦