炒雞簡單的canvas粒子

要說canvas中最精妙的地方，那應該就是對畫素操作的能力了，可能這也就是為什麼作為點陣圖的canvas一直不會被svg比下去的原因了。俗話說，須彌芥子，是大小之說，也有以小見大之說，顆顆粒子，足以構建巨集大效果。這是一篇炒雞簡單的canvas粒子教程，主要是講如何粒子特效的原理，一點運動中的公式。

首先，當我們知道要做粒子的效果的時候，我們要思考我們如何來實現，而且還要盡可能的面對我們親愛的物件，於是便有了如下的思考。

要有粒子

粒子在運動，運動就需要速度

勻速運動/變速運動

運動之外還需要哪些處理

這裡我定義了時間與粒子生成的數量，還有乙個粒子池。

也許會很奇怪，我們在運動的過程中每一幀都是時間，為什麼還要再設定這個時間，瀏覽器的渲染可以被看作正常流逝的時間，這裡的time則是相對時間如果感覺暈暈的，

這裡可以舉個小李子：

光在世界中沿直線傳播，你現在所能看到的月光是很久之前的月光，這就說明很久之前的月光一直在傳播，同時也意味著你的一切動作都還在傳播的過程中，只要你的速度足夠快，就可以追上你的過去。

開個小玩笑了，其實time的意思就是你的1s對於小球而言是2s,瀏覽器渲染設定的時間只是為了讓你的視覺上看不出影象的卡頓

const time=2;
const num=20;
var dots=;
複製**

function dot(x,y,vx,vy);
} //粒子渲染
dot.prototype.render = function(ctx) ;
//對當前粒子屬性做邏輯計算
dot.prototype.update = function
() ;
複製**

在當前粒子類中，我只給了速度的方向量，因為我們只要求粒子做勻速運動，這裡的計算公式則是x=vt(x:位移v:平均速度t:運動時間)

如果要對粒子施加力或者變速運動，則需要this.a=a來新增乙個加速度的屬性。然後根據加速度的方向做水平與垂直的分解，並且對速度的方向量產生作用，從而進行變速運動，這裡的公式如下

v=at

x=(v0+at/2)*t

v0為初速度，a為加速度的方向量，x為方向上的位移

for(let i=0;i複製**

通過對canvas的寬高進行隨機取整來獲取隨機的座標點。並且例項化我們的粒子。並且推入粒子池中。這裡因為我們在update方法中會直接呼叫render，所以我們只需要在例項化的時候執行一次render將ctx環境傳入，後面就可以全部交給update來完成了。

requestanimframe(anim);
function
anim
(){ for(let i=0;i複製**

這裡我們只需要對粒子池中的粒子進行資料持續更新，就可以讓粒子們跑起來了。

粒子的教程比較簡單，但確是幾乎所有粒子效果的依託，粒子已經可以生成，那麼只需要讓粒子在我們的規定路徑上運動，就可以達到我們所需要的效果了。

知乎背景的網狀效果

遍歷所有粒子點，如果在範圍內，則使用moveto與llineto來生成連線線。

粒子成字

將文字先繪製在離屏canvas上，然後返回所有不透明畫素點的座標，遍歷時可以直接遍歷，也可以使用width與height來計算，如果當前點需要繪製，就生成粒子。

這裡說到畫素點不透明，是因為在canvas上，你只要不設定，預設是不存在背景色，也就說，所有繪製的所有畫素都可以通過判斷其alpha值是否為0來判斷，也可以通過設定alpha的閾值來將一些填充度不夠的點給扔除。比如說當alpha對應為128的時候，透明度約為0.5，這也是為什麼很多人的部落格裡都用到了128這個判斷值。

還有很多的效果，粒子特效是乙個很大的話題，如ae unity等軟體中都會有內建的粒子外掛程式與外接的大量粒子效果外掛程式。

後面還會寫一些有些高度的粒子效果

不定期更新canvas與svg的相關技術教程，有實戰型，也會有主原理型的，2d 2.5d 3d都會包含到，同時涉及的有線性代數物理圖形學等相關的基礎知識。

本次demo原始碼：粒子效果

歡迎各位客官收藏關注，投硬幣餵養。

同時感謝大家為我提出文中的不足與問題~

炒雞簡單的canvas粒子

nginx 做負載均衡，炒雞簡單

炒雞簡單的MySQL備份與恢復

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

炒雞簡單的canvas粒子

nginx 做負載均衡，炒雞簡單

炒雞簡單的MySQL備份與恢復

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

相關推薦