Canvas 文本轉(zhuǎn)粒子效果的實(shí)現(xiàn)代碼
我要評(píng)論本文介紹了Canvas 文本轉(zhuǎn)粒子效果的實(shí)現(xiàn)代碼，分享給大家，希望對(duì)大家有所幫助，具體如下：
通過(guò)粒子來(lái)繪制文本讓人感覺很有意思，配合粒子的運(yùn)動(dòng)更會(huì)讓這個(gè)效果更加酷炫。本文介紹在 canvas 中通過(guò)粒子來(lái)繪制文本的方法。
實(shí)現(xiàn)原理
總的來(lái)說(shuō)要做出將文本變成粒子展示的效果其實(shí)很簡(jiǎn)單，實(shí)現(xiàn)的原理就是使用兩張 canvas，一張是用戶看不到的 A canvas，用來(lái)繪制文本；另一張是用戶看到的 B canvas，用來(lái)根據(jù) A 的文本數(shù)據(jù)來(lái)生成粒子。直觀表示如圖：
創(chuàng)建離屏 canvas
HTML 只需要放置主 canvas 即可：
<!-- HTML 結(jié)構(gòu) --> <html> <head> ... </head> <body> <canvas id="stage"></canvas> </body> </html>
然后創(chuàng)建一個(gè)離屏 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);
這時(shí)頁(yè)面上什么也沒有發(fā)生，但實(shí)際上可以想象在離屏 canvas 上，此時(shí)應(yīng)該如圖所示：
核心方法 getImageData
使用 canvas 的 getImageData 方法，可以獲取一個(gè) ImageData 對(duì)象，這個(gè)對(duì)象用來(lái)描述 canvas 指定區(qū)域內(nèi)的像素?cái)?shù)據(jù)。也就是說(shuō)，我們可以獲取 “Hello” 這個(gè)文本每個(gè)像素點(diǎn)的位置和顏色，也就可以在指定位置生成粒子，最后形成的效果就是粒子拼湊成文本了。
要獲取像素信息，需要使用 ImageData 對(duì)象的 data 屬性，它將所有像素點(diǎn)的 rgba 值鋪開成了一個(gè)數(shù)組，每個(gè)像素點(diǎn)有 rgba 四個(gè)值，這個(gè)數(shù)組的個(gè)數(shù)也就是 像素點(diǎn)數(shù)量 * 4。
假設(shè)我選取了一個(gè) 3 * 4 區(qū)域，那么一共 12 個(gè)像素點(diǎn)，每個(gè)像素點(diǎn)有 rgba 四個(gè)值，所以 data 這個(gè)數(shù)組就會(huì)有 12 * 4 = 48 個(gè)元素。
如果打印出 data，可以看到即從左往右，從上往下排列這些像素點(diǎn)的 rgba。
當(dāng)然我們要獲取的區(qū)域必須要包含文本，所以應(yīng)該獲取整個(gè)離屏 canvas 的區(qū)域：
const imgData = offscreenCtx.getImageData(0, 0, WIDTH, HEIGHT).data;
生成粒子
拿到 ImageData 后，通過(guò)遍歷 data 數(shù)組，可以判斷在離屏 canvas 的畫布中，哪些點(diǎn)是有色彩的（處于文本中間），哪些點(diǎn)是沒有色彩的（不在文本上），把那些有色彩的像素位置記下來(lái)，然后在主 canvas 上生成粒子，就 ok 了。
首先創(chuàng)建一下粒子類：
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，我們可以根據(jù)透明度，也就是 rgba 中的第四個(gè)元素是否不為 0 來(lái)判斷該像素是否在文本中。
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 數(shù)組來(lái)存放所有的粒子，這里的 skip 的作用是遍歷的步長(zhǎng)，如果我們一個(gè)像素一個(gè)像素地掃，那么最后拼湊文本的粒子將會(huì)非常密集，增大這個(gè)值，最后產(chǎn)生的粒子就會(huì)更稀疏。
最后在創(chuàng)建主 canvas 并繪制即可：
const canvas = document.querySelector('#stage');
canvas.width = WIDTH;
canvas.height = HEIGHT;
const ctx = canvas.getContext('2d');
for (const particle of particles) {
particle.draw(ctx);
}
效果如下：
完整代碼見01-basic-text-to-particles
添加效果
了解實(shí)現(xiàn)原理之后，其實(shí)其他的就都是給粒子添加一些動(dòng)效了。首先可以讓粒子有一些隨機(jī)的位移，避免看上去過(guò)于整齊。
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) {
// 創(chuàng)建粒子時(shí)加入隨機(jī)位移
particles.push(new Particle({
x: x + Math.random() * 6 - 3,
y: y + Math.random() * 6 - 3,
radius: 1,
color: '#2EA9DF'
}));
}
}
}
效果如下：
如果想實(shí)現(xiàn)變大的效果，如：
這種要怎么實(shí)現(xiàn)呢，首先需要隨機(jī)產(chǎn)生粒子的大小，這只需要在創(chuàng)建粒子時(shí)對(duì) radius 進(jìn)行 random 即可。另外如果要讓粒子半徑動(dòng)態(tài)改變，那么需要區(qū)分開粒子的渲染半徑和初始半徑，并使用 requestAnimationFrame 進(jìn)行動(dòng)畫渲染：
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);
}
});
那么關(guān)鍵就在于粒子的 update 方法要如何實(shí)現(xiàn)了，假設(shè)我們想讓粒子半徑在 1 到 5 中平滑循環(huán)改變，很容易讓人聯(lián)想到三角函數(shù)，如：
橫軸應(yīng)該是與時(shí)間相關(guān)，可以再維護(hù)一個(gè)變量每次調(diào)用 update 的時(shí)候進(jìn)行加操作，簡(jiǎn)單做也可以直接用時(shí)間戳來(lái)進(jìn)行計(jì)算。update 方法示例如下：
update () {
this.dynamicRadius = 3 + 2 * Math.sin(new Date() / 1000 % 1000 * this.radius);
}
完整代碼見 02-text-to-particles-with-size-changing
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Canvas 實(shí)現(xiàn)炫麗的粒子運(yùn)動(dòng)效果（粒子生成文字）
這篇文章主要介紹了詳解Canvas 實(shí)現(xiàn)炫麗的粒子運(yùn)動(dòng)效果（粒子生成文字），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-01