本文介紹了Canvas 文字轉粒子效果的實作程式碼，分享給大家，希望對大家有幫助，如下：
透過粒子來繪製文字讓人感覺很有意思，配合粒子的運動更會讓這個效果更酷炫。本文介紹在canvas 中透過粒子來繪製文字的方法。
實現原理總的來說要做出將文字變成粒子展示的效果其實很簡單，實現的原理就是使用兩張canvas，一張是使用者看不到的A canvas，用來繪製文字；另一張是使用者看到的B canvas，用來根據A 的文字資料來產生粒子。直觀表示如圖：
建立離螢幕canvasHTML 只需要放置主canvas 即可：
<!-- HTML 架構--><html><head> ...</head><body> <canvas id=stage></canvas></body></html>
然後創建一個離屏canvas，並繪製文字：
const WIDTH = window.innerWidth;const HEIGHT = window.innerHeight;const offscreenCanvas = document.createElement('canvas');const offscreenCtx = offscreenCanvas.getContext('2d'); HEIGHT;offscreenCtx.font = '100px PingFang SC';offscreenCtx.textAlign = 'center';offscreenCtx.baseline = 'middle';offscreenCtx.fillText('Hello', WIDTH / 2, HEIGHT / 222);這時頁面上什麼也沒發生，但實際上可以想像在離屏canvas 上，此時應該如圖所示：
核心方法getImageData使用canvas 的getImageData方法，可以取得一個ImageData對象，這個物件用來描述canvas 指定區域內的像素資料。也就是說，我們可以取得Hello 這個文字每個像素點的位置和顏色，也就可以在指定位置產生粒子，最後形成的效果就是粒子拼湊成文字了。
要獲取像素信息，需要使用ImageData物件的data屬性，它將所有像素點的rgba 值鋪開成了一個數組，每個像素點有rgba 四個值，這個數組的個數也就是像素点数量* 4 。
假設我選取了一個3 * 4區域，那麼總共12 個像素點，每個像素點都有rgba 四個值，所以data 這個陣列就會有12 * 4 = 48個元素。
如果列印出data，可以看到即從左到右，從上往下排列這些像素點的rgba。
當然我們要取得的區域必須要包含文本，所以應該取得整個離屏canvas 的區域：
const imgData = offscreenCtx.getImageData(0, 0, WIDTH, HEIGHT).data;產生粒子
拿到ImageData 後，透過遍歷data 數組，可以判斷在離屏canvas 的畫布中，哪些點是有色彩的（處於文字中間），哪些點是沒有色彩的（不在文字上），把那些有色彩的像素位置記下來，然後在主canvas 上產生粒子，就ok 了。
首先創建一下粒子類別：
class Particle { constructor (options = {}) { const { x = 0, y = 0, color = '#fff', radius = 5} = options; this.radius = radius; this.x = x; this.y = y; this.color = color; } draw (ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); }}遍歷data，我們可以根據透明度，也就是rgba 中的第四個元素是否不為0 來判斷該像素是否在文字中。
const particles = [];const skip = 4;for (var y = 0; y < HEIGHT; y += skip) { for (var x = 0; x < WIDTH; x += skip) { var opacityIndex = (x + y * WIDTH) * 4 + 3; if (imgData[opacityIndex] > 0) { particles.push(new Particle({ x, y, radius: 1, color: '#2EA9DF' })); } }}我們用particles數組來存放所有的粒子，這裡的skip的作用是遍歷的步長，如果我們一個像素一個像素地掃，那麼最後拼湊文本的粒子將會非常密集，增大這個值，最後產生的粒子就會更稀疏。
最後在創建主canvas 並繪製即可：
const canvas = document.querySelector('#stage');canvas.width = WIDTH;canvas.height = HEIGHT;const ctx = canvas.getContext('2d');for (const particle of particles) { particle.draw(ctxle. );}效果如下：
完整程式碼請見01-basic-text-to-particles
添加效果了解實現原理之後，其實其他的就都是在粒子上添加一些動效了。首先可以讓粒子有一些隨機的位移，避免看起來過於整齊。
const particles = [];const skip = 4;for (var y = 0; y < HEIGHT; y += skip) { for (var x = 0; x < WIDTH; x += skip) { var opacityIndex = (x + y * WIDTH) * 4 + 3; if (imgData[opacityIndex] > 0) { //建立粒子時加入隨機位移particles.push(new Particle({ x: x + Math.random() * 6 - 3, y: y + Math.random() * 6 - 3, radius: 1, color: '# 2EA9DF' })); } }}效果如下：
如果想實現變大的效果，如：
這種要怎麼實現呢，首先需要隨機產生粒子的大小，這只需要在創建粒子時對radius 進行random 即可。另外如果要讓粒子半徑動態改變，那麼需要區分開粒子的渲染半徑和初始半徑，並使用requestAnimationFrame進行動畫渲染：
class Particle { constructor (options = {}) { const { x = 0, y = 0, color = '#fff', radius = 5} = options; this.radius = radius; // ... this.dynamicRadius = radius; // 新增dynamicRadius 屬性} draw (ctx) { // ... ctx.arc(this.x, this.y, this.dynamicRadius, 0, 2 * Math.PI, false); // 替換為dynamicRadius // ... } update () { // TODO }}requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, WIDTH, HEIGHT); for (const particle of particles) { particle.update(); particle.draw(ctx); }});那麼關鍵就在於粒子的update方法要如何實現了，假設我們想要讓粒子半徑在1 到5 中平滑循環改變，很容易讓人聯想到三角函數，如：
橫軸應該是與時間相關，可以再維護一個變數每次呼叫update 的時候進行加操作，簡單做也可以直接用時間戳來進行計算。 update方法範例如下：
update () { this.dynamicRadius = 3 + 2 * Math.sin(new Date() / 1000 % 1000 * this.radius);}完整程式碼請見02-text-to-particles-with-size-changing
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。