使用Canvas怎么將文本轉(zhuǎn)換為粒子效果

使用Canvas怎么將文本轉(zhuǎn)換為粒子效果？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了北辰免費(fèi)建站歡迎大家使用！

實(shí)現(xiàn)原理

總的來說要做出將文本變成粒子展示的效果其實(shí)很簡單，實(shí)現(xiàn)的原理就是使用兩張 canvas，一張是用戶看不到的 A canvas，用來繪制文本；另一張是用戶看到的 B canvas，用來根據(jù) A 的文本數(shù)據(jù)來生成粒子。直觀表示如圖：

創(chuàng)建離屏 canvas

HTML 只需要放置主 canvas 即可：

<!-- HTML 結(jié)構(gòu) -->
<html>
<head>
  ...
</head>
<body>
  <canvas id="stage"></canvas>
</body>
</html>

然后創(chuàng)建一個離屏 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);

這時頁面上什么也沒有發(fā)生，但實(shí)際上可以想象在離屏 canvas 上，此時應(yīng)該如圖所示：

使用Canvas怎么將文本轉(zhuǎn)換為粒子效果

核心方法 getImageData

使用 canvas 的 getImageData 方法，可以獲取一個 ImageData 對象，這個對象用來描述 canvas 指定區(qū)域內(nèi)的像素數(shù)據(jù)。也就是說，我們可以獲取 “Hello” 這個文本每個像素點(diǎn)的位置和顏色，也就可以在指定位置生成粒子，最后形成的效果就是粒子拼湊成文本了。

要獲取像素信息，需要使用 ImageData 對象的 data 屬性，它將所有像素點(diǎn)的 rgba 值鋪開成了一個數(shù)組，每個像素點(diǎn)有 rgba 四個值，這個數(shù)組的個數(shù)也就是 像素點(diǎn)數(shù)量 * 4。

假設(shè)我選取了一個 3 * 4 區(qū)域，那么一共 12 個像素點(diǎn)，每個像素點(diǎn)有 rgba 四個值，所以 data 這個數(shù)組就會有 12 * 4 = 48 個元素。

使用Canvas怎么將文本轉(zhuǎn)換為粒子效果

如果打印出 data，可以看到即從左往右，從上往下排列這些像素點(diǎn)的 rgba。

使用Canvas怎么將文本轉(zhuǎn)換為粒子效果

當(dāng)然我們要獲取的區(qū)域必須要包含文本，所以應(yīng)該獲取整個離屏 canvas 的區(qū)域：

const imgData = offscreenCtx.getImageData(0, 0, WIDTH, HEIGHT).data;

生成粒子

拿到 ImageData 后，通過遍歷 data 數(shù)組，可以判斷在離屏 canvas 的畫布中，哪些點(diǎn)是有色彩的（處于文本中間），哪些點(diǎn)是沒有色彩的（不在文本上），把那些有色彩的像素位置記下來，然后在主 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 中的第四個元素是否不為 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 數(shù)組來存放所有的粒子，這里的 skip 的作用是遍歷的步長，如果我們一個像素一個像素地掃，那么最后拼湊文本的粒子將會非常密集，增大這個值，最后產(chǎn)生的粒子就會更稀疏。

最后在創(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);
}

效果如下：

使用Canvas怎么將文本轉(zhuǎn)換為粒子效果

完整代碼見01-basic-text-to-particles

添加效果

了解實(shí)現(xiàn)原理之后，其實(shí)其他的就都是給粒子添加一些動效了。首先可以讓粒子有一些隨機(jī)的位移，避免看上去過于整齊。

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)建粒子時加入隨機(jī)位移
            particles.push(new Particle({
                x: x + Math.random() * 6 - 3,
                y: y + Math.random() * 6 - 3,
                radius: 1,
                color: '#2EA9DF'
            }));
        }
    }
}

效果如下：

使用Canvas怎么將文本轉(zhuǎn)換為粒子效果

如果想實(shí)現(xiàn)變大的效果，如：

使用Canvas怎么將文本轉(zhuǎn)換為粒子效果

這種要怎么實(shí)現(xiàn)呢，首先需要隨機(jī)產(chǎn)生粒子的大小，這只需要在創(chuàng)建粒子時對 radius 進(jìn)行 random 即可。另外如果要讓粒子半徑動態(tài)改變，那么需要區(qū)分開粒子的渲染半徑和初始半徑，并使用 requestAnimationFrame 進(jìn)行動畫渲染：

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ù)，如：

使用Canvas怎么將文本轉(zhuǎn)換為粒子效果

橫軸應(yīng)該是與時間相關(guān)，可以再維護(hù)一個變量每次調(diào)用 update 的時候進(jìn)行加操作，簡單做也可以直接用時間戳來進(jìn)行計算。update 方法示例如下：

update () {
    this.dynamicRadius = 3 + 2 * Math.sin(new Date() / 1000 % 1000 * this.radius);
}

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

網(wǎng)頁名稱：使用Canvas怎么將文本轉(zhuǎn)換為粒子效果
標(biāo)題路徑：http://jinyejixie.com/article6/jjpsog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)頁設(shè)計公司、網(wǎng)站設(shè)計、微信公眾號、網(wǎng)站內(nèi)鏈、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

使用Canvas怎么將文本轉(zhuǎn)換為粒子效果