本次分享一下使用canvas實現粒子效果拼出你想要的文字。
歡迎關注我的部落格，不定期更新中——
不久之前看到大搜車團隊出品的easy mock產品的介面中有乙個使用粒子拼出「mock so easy」的效果，感覺非常有意思，就像下面這樣：
當然了，這個easy mock的介面中還有粒子匯聚、散開、以及緩動等效果，這些在之後的文章中會不定時的更新實現思路。
我當時看到這個效果的時候是一段單一的英文，不知道原始碼能不能支援自己配置需要的字元，故想自己實現乙個可以配置的版本。
ps:突然想到作者之前也封裝過乙個輸入一段英文，輸出一段可表示該字母的「黑魔法**」：效果就像下面這樣：
緣由也是網上有人用這種黑魔法**拼出了單詞，但是並不是「可配置」的，也就不能想要啥就是啥，故才有了作者的一版封裝實現，文章如下：（相關**在原文中提及
你可以任意輸入你能想到的字元，只要打得進去：）
示例：
emmmm作者目前想到的辦法是：降低畫素數
來看下這個「非常粗略」的示意圖：
這是當我在頁面輸入「an」之後展示的隱藏的canvas的截圖，我將其放入到了ps中並放大，我們可以清晰地看到該圖是由乙個個很小的畫素點通過每個畫素點不同的顏色最終繪製出來的。而我們要做的就是用更少的「畫素點」來繪製同樣的內容。也就是原來100✖️100畫素的圖，我們如果用25✖️25來表示，那麼每個畫素點就會粗很多，同時粒度也會更加寬泛，之後我們如果將畫素點變為圓形，最後我們就可以得到如文章開頭提到的那樣，由乙個個粒子「拼」出了效果。
總的來說就是通過將輸入的資訊轉化為後，讀取的畫素資訊，同時粗略的將分塊，遍歷每塊區域中的畫素點判斷該塊是否需要畫乙個粒子。屆時所有區域遍歷完畢就可以用比畫素點少很多的粒子來大體表示每乙個輸入的字元。那麼具體實現過程如下：
- 將輸入的文字轉化為插入到乙個隱藏的canvas中
- 按一定比例如（4畫素✖️4畫素）分割該canvas影象，形成乙個擁有x * y個格仔的區域，每個格仔中擁有一定畫素數（4✖️4 = 16）
- 讀取該canvas中的畫素資料
- 獲取在每乙個格仔中擁有除灰度顏色的畫素數（白底或者黑底屬於插入到canvas中的的背景）
- 當乙個格仔中有顏色的畫素數佔所有畫素的一定程度後，認定該區域屬於輸入字元的一部分，則在該區域畫乙個粒子，否則不畫
文字轉化為插入canvas
function
loadcanvas
(value)
function
getimage
(canvas, ctx)
}
var imagedata = ctx.getimagedata(0, 0, this.width, this.height)
var datalength = imagedata.data.length
var diff = 4
//按4✖️4劃分區域，可自行改變嘗試
var newcanvas = document.getelementbyid('canvas')
var newctx = newcanvas.getcontext('2d')
for (var j = 0; j < this.height; j += diff)
if (colornum < diff * diff / 3 * 2)
var newbubble = new bubble(option)
newbubble.draw(newctx) //畫粒子} }
}
本次只實現了可配置拼出字元的功能，粒子動態上沒加入特效，其他效果實現思路之後可能會不定時更新——
慣例po作者的部落格，不定時更新中——
有問題歡迎在issues下交流。
canvas 粒子文字
無意間看到了我仍舊在這裡的 每天一點canvas動畫 的系列文章 表示感謝 粒子文字 這節感覺很不錯，研究了一下，因為原作者加入了幾個與使用者互動的屬性可動態改變粒子文字動畫的樣式，且 也抽離的比較徹底比較散，對於學習者我感覺理解山學習起來挺費勁。所以呢這裡我把核心的 整理了出來希望對這個感興趣同學...
canvas粒子線條效果
在正式開始之前，先上個效果圖看看 很酷炫有木有？那麼如何實現這個效果呢？首先，我做這個特效的基本步驟是這樣的 1.將若干個粒子隨機分布在畫布 canvas 上，並且給他們乙個初始速度 2.為了不讓粒子離開畫布的可視範圍，當粒子移動到畫布邊緣時，會進行 3.設定乙個最大距離，若粒子間的距離超過最大距離...
Canvas 文字轉粒子效果
通過粒子來繪製文字讓人感覺很有意思，配合粒子的運動更會讓這個效果更加酷炫。本文介紹在 canvas 中通過粒子來繪製文字的方法。總的來說要做出將文字變成粒子展示的效果其實很簡單，實現的原理就是使用兩張 canvas，一張是使用者看不到的 a canvas，用來繪製文字 另一張是使用者看到的 b ca...