canvas實現動態粒子效果

前言

最近期末考試，很長時間沒有寫程式，於是想找個東西練練手。之前在寫程式的時候就使用了這種動態粒子效果，但是那時是直接拷貝的別人的程式碼，於是就動手嘗試寫出這種效果。

引入

Canvas是一個可以使用指令碼來繪製圖形的 HTML 元素...（略過N字）。canvas就是一個畫板，可以呼叫它的一些方法讓我們"作畫"。可是我對這個一無所知，於是就百度了一下教程，瞭解到瞭如下函式：

• strokeStyle描邊顏色
• fillStyle填充顏色
• fillRect填充了的矩形
• moveTo移動畫筆
• lineTo從當前畫筆位置畫線到指定位置

 一、初始化並畫出隨機粒子

（1）將canvas標籤加入到body並設定id屬性，在js中獲取並取得畫筆。

var ctx=document.getElementById("can").getContext("2d");

（2）迴圈畫出20個隨機點。我們使用畫筆的fillRect函式畫一個個矩形充當粒子。fillRect需要橫縱座標與矩形寬高，我們需要隨機出橫縱座標。這點通過Math.random()可以輕鬆實現。

（3）將每個點的資訊儲存起來，以便於後面點的移動，主要包括點的橫縱座標、點的顏色。

二、讓隨機出的粒子動起來

（1）可以通過setInterval讓程式重複執行程式碼段，所以我們需要設計一段程式碼來進行粒子的位置移動。
（2）我們可以隨機出粒子的座標點，為什麼不可以隨機出一個目標點，讓粒子移動過去呢？所以我為每一個粒子隨機出了一個目標位置，讓粒子向目標移動。每次執行程式碼段時便判斷是否移動到目標位置，如果沒有就繼續移動，如果到了就新隨機出一個目標點。
（3）粒子應該怎麼想目標移動呢？這裡我使用了小學就會的一元一次線性函式，讓粒子線性的向目標移動。通過粒子的當前點與目標點，我們不難得出兩點之間的直線方程。我們每次讓x以自增1的步長，來計算y值。此時的xy便對應粒子移動到下一步的座標，這樣便實現了移動。

（4）其實可以使用非線性函式，可以採用一些緩動函式，這樣可以讓動畫變得自然一些。

三、連線

讓距離較近的粒子相互連線起來，實現相應效果。可以通過雙重迴圈進行連線判斷，只要兩者距離達到閥值就連線起來。

四、美化

調整圖中粒子大小顏色，調整連線閥值，去除線性函式軌跡，得出結果圖。

五、未來優化

（1）粒子移動採用非線性緩動函式。
（2）粒子移動每次步進應該由需要移動路徑的長度決定，而不只是1。

（3）加入滑鼠事件，做到與使用者互動。

專案原始碼：我的GitHub（https://github.com/printlin/dynamicPoint）