canvas粒子線條效果

在正式開始之前，先上個效果圖看看：

很酷炫有木有？？？

那麼如何實現這個效果呢？

首先，我做這個特效的基本步驟是這樣的：

1.將若干個粒子隨機分布在畫布（canvas

）上，並且給他們乙個初始速度

2.為了不讓粒子離開畫布的可視範圍，當粒子移動到畫布邊緣時，會進行**

3.設定乙個最大距離，若粒子間的距離超過最大距離，便不會產生連線，若小於等於最大距離，則粒子間距越小，粒子間連的線就越寬，或者說顏色越深

4.設定滑鼠事件，當滑鼠移動時，粒子與滑鼠距離若小於等於最大距離，那麼粒子將會朝著滑鼠方向移動

那麼我們就按照這四個步驟來進行：

1
<
canvas 
width
="1300"
height
="600"
id="mycanvas"
>
canvas
>

正常操作，我設定了乙個寬1300，高600的畫布

1 let c = document.getelementbyid('mycanvas');
2 let cxt = c.getcontext('2d');
3 let num = 100;//
粒子數量
4 let balls = ;

num是我設定的粒子數量，數量可以隨意設定，但要注意的是，如果粒子數量太多，因為裝置的原因，可能粒子不能夠流暢運動，或移動的很慢。

用balls陣列來存放隨機數

1
for(let i = 0; i < num; i ++),$,$,.7)`;
9 balls.push();//
存入陣列
10 }

接下來用for迴圈設定隨機數

從上到下順序是：粒子初始橫座標、縱座標、半徑、水平移動速度、和垂直移動速度

還可以設定粒子的顏色，這裡我注釋掉了

最後把隨機出的數推入陣列儲存起來

1
function
change(ball)

先繪製粒子，然後判斷粒子是否運動到畫布邊界，如果是，就使速度乘以-1，這樣粒子會朝著相反方向運動

注意：這裡不能先執行 startx/y + speedx/y 再執行粒子是否運動到畫布邊界的判斷

如果這樣做，那麼在設定初始橫座標、縱座標的時候就不能直接設為 math.random() * c.width/height 或 math.random() * c.width/height + 1

function
move()
}

建立乙個move函式來呼叫change

每當執行一遍for迴圈時，都要清除一次畫布，不然之前粒子運動的軌跡都會顯示在上面

//
點與點之間劃線，距離較小的連線，距離大的則不連
function
drawlines())`;
cxt.moveto(newballs[i].startx, newballs[i].starty);
cxt.lineto(ball.startx, ball.starty);
cxt.stroke();}}
//新增滑鼠事件
c.onmousemove=function
(ev)}};
});}
setinterval(drawlines,20);

建立乙個drawline函式來執行連線效果和滑鼠移動效果

首先設定乙個最大距離long，我設的是100px的長度

定義乙個新陣列newballs便於和balls中的粒子做距離比較

用foreach()方法遍歷balls陣列，這樣就可以直接和balls的所有粒子進行比較，比較方便

計算出粒子之間的距離dis，如果dis小於等於long，那麼就繪製線條連線兩個粒子

if(dis <= long
))`;
cxt.moveto(newballs[i].startx, newballs[i].starty);
cxt.lineto(ball.startx, ball.starty);
cxt.stroke();
}

線條的寬度和透明度是根據long和dis的關係來設定的

這樣的效果更加自然

1 c.onmousemove=function
(ev)11}
12 };

設定滑鼠事件，仍然是一樣的操作

先算出滑鼠和粒子之間的距離，如果粒子和滑鼠距離小於等於最大距離，就朝著滑鼠的方向移動

這個效果是我自己做的，和網上的很多效果感覺不太一樣，如果發現了更酷炫的效果，那麼之後我會更新

Canvas 文字轉粒子效果

通過粒子來繪製文字讓人感覺很有意思，配合粒子的運動更會讓這個效果更加酷炫。本文介紹在 canvas 中通過粒子來繪製文字的方法。總的來說要做出將文字變成粒子展示的效果其實很簡單，實現的原理就是使用兩張 canvas，一張是使用者看不到的 a canvas，用來繪製文字另一張是使用者看到的 b ca...

Canvas 文字轉粒子效果

canvas 實現簡單的粒子運動效果

1.初始化畫布 2.再自定義建立80個圓點數量可自定義然後初始化 3.然後實現是在一定距離範圍內的圓點兩兩相連，並且運動起來 4.然後實現滑鼠移進出現圓點與裡面的圓點能相連 1.初始化畫布初始化畫布 let ele document.getelementbyid my canvas ele.w...

canvas粒子線條效果

Canvas 文字轉粒子效果

Canvas 文字轉粒子效果

canvas 實現簡單的粒子運動效果

相關推薦