Canvas 文字轉粒子效果

通過粒子來繪製文字讓人感覺很有意思，配合粒子的運動更會讓這個效果更加酷炫。本文介紹在 canvas 中通過粒子來繪製文字的方法。

總的來說要做出將文字變成粒子展示的效果其實很簡單，實現的原理就是使用兩張 canvas，一張是使用者看不到的 a canvas，用來繪製文字；另一張是使用者看到的 b canvas，用來根據 a 的文字資料來生成粒子。直觀表示如圖：

html 只需要放置主 canvas 即可：

然後建立乙個離屏 canvas，並繪製文字：

const width = window.innerwidth;
const height = window.innerheight;
const offscreencanvas = document.createelement('canvas');
const offscreenctx = offscreencanvas.getcontext('2d');
offscreencanvas.width = width;
offscreencanvas.height = height;
offscreenctx.font = '100px pingfang sc';
offscreenctx.textalign = 'center';
offscreenctx.baseline = 'middle';
offscreenctx.filltext('hello', width / 2, height / 2);

這時頁面上什麼也沒有發生，但實際上可以想象在離屏 canvas 上，此時應該如圖所示：

使用 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 )  = options;
this.radius = radius;
this.x = x;
this.y = y;
this.color = color;
}draw (ctx) 
}

遍歷 data，我們可以根據透明度，也就是 rgba 中的第四個元素是否不為 0 來判斷該畫素是否在文字中。

const particles = ;
const skip = 4;
for (var y = 0; y < height; y += skip) ));}}
}

我們用particles陣列來存放所有的粒子，這裡的skip的作用是遍歷的步長，如果我們乙個畫素乙個畫素地掃，那麼最後拼湊文字的粒子將會非常密集，增大這個值，最後產生的粒子就會更稀疏。

最後在建立主 canvas 並繪製即可：

const canvas = document.queryselector('#stage');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getcontext('2d');
for (const particle of particles)

效果如下：

完整**見 01-basic-text-to-particles

了解實現原理之後，其實其他的就都是給粒子新增一些動效了。首先可以讓粒子有一些隨機的位移，避免看上去過於整齊。

const particles = ;
const skip = 4;
for (var y = 0; y < height; y += skip) ));}}
}

效果如下：

如果想實現變大的效果，如：

這種要怎麼實現呢，首先需要隨機產生粒子的大小，這只需要在建立粒子時對 radius 進行 random 即可。另外如果要讓粒子半徑動態改變，那麼需要區分開粒子的渲染半徑和初始半徑，並使用requestanimationframe進行動畫渲染：

class particle )  = options;
this.radius = radius;
// ...
this.dynamicradius = radius; // 新增 dynamicradius 屬性
}draw (ctx) 
update () 
}requestanimationframe(function loop() 
});

那麼關鍵就在於粒子的update方法要如何實現了，假設我們想讓粒子半徑在 1 到 5 中平滑迴圈改變，很容易讓人聯想到三角函式，如：

update ()

完整**見 02-text-to-particles-with-size-changin

Canvas 文字轉粒子效果

Canvas 文字轉粒子效果

canvas 粒子文字

canvas粒子線條效果

Canvas 文字轉粒子效果

Canvas 文字轉粒子效果

canvas 粒子文字

canvas粒子線條效果

相關推薦