• JavaScript实现在HTML中的粒子文字特效

    这是一个蛮实用的小功能，用于在HTML中显示出粒子文字特效，具体什么效果嘛，话不多说，看图：
    特效展示
    初始时会全屏扩散，然后聚集成预设定的文本，之后的鼠标移动与点击文字都会产生对应的扩散了特效，并自动恢复文本显示，粒子的大小、数量、移动速度，文本的大小、颜色，等都是可以自定义的。

    JS代码如下：

    /**
 * 粒子文字特效
 * 范例：
 * 文字
 * 
 * 默认页面居中显示
 * @author Rob Sivan
 * @date 2022/9/20
 */
const COLOR = "#39BC54"; // 设定粒子特效颜色
let MESSAGE = document.getElementById("ChangeText").textContent; // 根据标签的ID获取待处理的文字内容

let FONT_SIZE = (window.innerWidth * 0.08); // 字体大小
let AMOUNT = 6000; // 设定粒子数量
let SIZE = 2; // 粒子大小
let INITIAL_DISPLACEMENT = 500; // 最初位移量
const INITIAL_VELOCITY = 7.5; // 最初速度
const VELOCITY_RETENTION = 0.95; // 速度保持
let SETTLE_SPEED = 1; // 稳定速度
const FLEE_SPEED = 2; // 逃逸速度
const FLEE_DISTANCE = 50; // 逃逸距离
let FLEE = true; // 逃逸模式
let SCATTER_VELOCITY = 3; // 散射速度
const SCATTER = true; // 散射模式

// 若处于移动设备展示
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    // Mobile
    MESSAGE = document.getElementById("ChangeText").textContent; // 通过标签ID获取文本内容

    FONT_SIZE = 50;  // 字体大小减小
    AMOUNT = 300; // 粒子数量减少
    SIZE = 2;
    INITIAL_DISPLACEMENT = 100; // 最初位移量减少
    SETTLE_SPEED = 1; // 最初速度减少
    FLEE = false; // 关闭逃逸模式
    SCATTER_VELOCITY = 2; // 散射速度
}

const canvas = document.getElementById("ChangeText");
const ctx = canvas.getContext("2d"); // 创建画布

let POINTS = [];
const MOUSE = {
    x: 0,
    y: 0
};

function Point(x, y, r, g, b, a) {
    const angle = Math.random() * 6.28;
    this.x = canvas.width / 2 - x + (Math.random() - 0.5) * INITIAL_DISPLACEMENT;
    this.y = canvas.height / 2 - y + (Math.random() - 0.5) * INITIAL_DISPLACEMENT;
    this.velx = INITIAL_VELOCITY * Math.cos(angle);
    this.vely = INITIAL_VELOCITY * Math.sin(angle);
    this.target_x = canvas.width / 2 - x;
    this.target_y = canvas.height / 2 - y;
    this.r = r;
    this.g = g;
    this.b = b;
    this.a = a;

    this.getX = function () {
        return this.x;
    }

    this.getY = function () {
        return this.y;
    }
    this.fleeFrom = function () {
        this.velx -= ((MOUSE.x - this.x) * FLEE_SPEED / 10);
        this.vely -= ((MOUSE.y - this.y) * FLEE_SPEED / 10);
    }

    this.settleTo = function () {
        this.velx += ((this.target_x - this.x) * SETTLE_SPEED / 100);
        this.vely += ((this.target_y - this.y) * SETTLE_SPEED / 100);
        this.velx -= this.velx * (1 - VELOCITY_RETENTION);
        this.vely -= this.vely * (1 - VELOCITY_RETENTION);
    }

    this.scatter = function () {
        const unit = this.unitVecToMouse();
        const vel = SCATTER_VELOCITY * 10 * (0.5 + Math.random() / 2);
        this.velx = -unit.x * vel;
        this.vely = -unit.y * vel;
    }

    this.move = function () {
        if (this.distanceToMouse() <= FLEE_DISTANCE) {
            this.fleeFrom();
        } else {
            this.settleTo();
        }

        if (this.x + this.velx < 0 || this.x + this.velx >= canvas.width) {
            this.velx *= -1;
        }
        if (this.y + this.vely < 0 || this.y + this.vely >= canvas.height) {
            this.vely *= -1;
        }

        this.x += this.velx;
        this.y += this.vely;
    }
    this.distanceToMouse = function () {
        return this.distanceTo(MOUSE.x, MOUSE.y);
    }

    this.distanceTo = function (x, y) {
        return Math.sqrt((x - this.x) * (x - this.x) + (y - this.y) * (y - this.y));
    }
    this.unitVecToMouse = function () {
        return this.unitVecTo(MOUSE.x, MOUSE.y);
    }

    this.unitVecTo = function (x, y) {
        const dx = x - this.x;
        const dy = y - this.y;
        return {
            x: dx / Math.sqrt(dx * dx + dy * dy),
            y: dy / Math.sqrt(dx * dx + dy * dy)
        };
    }
}

window.addEventListener("resize", function () {
    resizeCanvas()
    adjustText()
});

if (FLEE) {
    window.addEventListener("mousemove", function (event) {
        MOUSE.x = event.clientX;
        MOUSE.y = event.clientY;
    });
}

if (SCATTER) {
    window.addEventListener("click", function (event) {
        MOUSE.x = event.clientX;
        MOUSE.y = event.clientY;
        for (let i = 0; i < POINTS.length; i++) {
            POINTS[i].scatter();
        }
    });
}

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function adjustText() {
    ctx.fillStyle = COLOR;
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    ctx.font = FONT_SIZE + "px Arial";
    ctx.fillText(MESSAGE, canvas.width / 2, canvas.height / 2);
    const textWidth = ctx.measureText(MESSAGE).width;
    if (textWidth === 0) {
        return;
    }
    const minX = canvas.width / 2 - textWidth / 2;
    const minY = canvas.height / 2 - FONT_SIZE / 2;
    const data = ctx.getImageData(minX, minY, textWidth, FONT_SIZE).data;
    let isBlank = true;
    for (let i = 0; i < data.length; i++) {
        if (data[i] !== 0) {
            isBlank = false;
            break;
        }
    }

    if (!isBlank) {
        let count = 0;
        let curr = 0;
        let num = 0;
        let x = 0;
        let y = 0;
        const w = Math.floor(textWidth);
        POINTS = [];
        while (count < AMOUNT) {
            while (curr === 0) {
                num = Math.floor(Math.random() * data.length);
                curr = data[num];
            }
            num = Math.floor(num / 4);
            x = w / 2 - num % w;
            y = FONT_SIZE / 2 - Math.floor(num / w);
            POINTS.push(new Point(x, y, data[num * 4], data[num * 4 + 1], data[num * 4 + 2], data[num * 4 + 3]));
            curr = 0;
            count++;
        }
    }
}

function init() {
    resizeCanvas()
    adjustText()
    window.requestAnimationFrame(animate);
}

function animate() {
    update();
    draw();
}

function update() {
    let point;
    for (let i = 0; i < POINTS.length; i++) {
        point = POINTS[i];
        point.move();
    }
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    let point;
    for (let i = 0; i < POINTS.length; i++) {
        point = POINTS[i];
        ctx.fillStyle = "rgba(" + point.r + "," + point.g + "," + point.b + "," + point.a + ")";
        ctx.beginPath();
        ctx.arc(point.getX(), point.getY(), SIZE, 0, 2 * Math.PI);
        ctx.fill();
    }

    window.requestAnimationFrame(animate);
}

init();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231

    具体使用方法的话，可以外部调用：
    外部调用示例
    这里需要用到canvas标签并定义它的ID，外部调用当然这是为了让页面主题更简洁，图省事的话，，你也可以直接拉到它下面？
    内部调用示例
    具体示例代码为：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面title>
head>
<body>
<canvas id="ChangeText">测试文本canvas>

<script type="text/javascript">
    const COLOR = "#39BC54"; // 设定粒子特效颜色
    let MESSAGE = document.getElementById("ChangeText").textContent; // 根据标签的ID获取待处理的文字内容

    let FONT_SIZE = (window.innerWidth * 0.08); // 字体大小
    let AMOUNT = 6000; // 设定粒子数量
    let SIZE = 2; // 粒子大小
    let INITIAL_DISPLACEMENT = 500; // 最初位移量
    const INITIAL_VELOCITY = 7.5; // 最初速度
    const VELOCITY_RETENTION = 0.95; // 速度保持
    let SETTLE_SPEED = 1; // 稳定速度
    const FLEE_SPEED = 2; // 逃逸速度
    const FLEE_DISTANCE = 50; // 逃逸距离
    let FLEE = true; // 逃逸模式
    let SCATTER_VELOCITY = 3; // 散射速度
    const SCATTER = true; // 散射模式

    // 若处于移动设备展示
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        // Mobile
        MESSAGE = document.getElementById("ChangeText").textContent; // 通过标签ID获取文本内容

        FONT_SIZE = 50;  // 字体大小减小
        AMOUNT = 300; // 粒子数量减少
        SIZE = 2;
        INITIAL_DISPLACEMENT = 100; // 最初位移量减少
        SETTLE_SPEED = 1; // 最初速度减少
        FLEE = false; // 关闭逃逸模式
        SCATTER_VELOCITY = 2; // 散射速度
    }

    const canvas = document.getElementById("ChangeText");
    const ctx = canvas.getContext("2d"); // 创建画布

    let POINTS = [];
    const MOUSE = {
        x: 0,
        y: 0
    };

    function Point(x, y, r, g, b, a) {
        const angle = Math.random() * 6.28;
        this.x = canvas.width / 2 - x + (Math.random() - 0.5) * INITIAL_DISPLACEMENT;
        this.y = canvas.height / 2 - y + (Math.random() - 0.5) * INITIAL_DISPLACEMENT;
        this.velx = INITIAL_VELOCITY * Math.cos(angle);
        this.vely = INITIAL_VELOCITY * Math.sin(angle);
        this.target_x = canvas.width / 2 - x;
        this.target_y = canvas.height / 2 - y;
        this.r = r;
        this.g = g;
        this.b = b;
        this.a = a;

        this.getX = function () {
            return this.x;
        }

        this.getY = function () {
            return this.y;
        }
        this.fleeFrom = function () {
            this.velx -= ((MOUSE.x - this.x) * FLEE_SPEED / 10);
            this.vely -= ((MOUSE.y - this.y) * FLEE_SPEED / 10);
        }

        this.settleTo = function () {
            this.velx += ((this.target_x - this.x) * SETTLE_SPEED / 100);
            this.vely += ((this.target_y - this.y) * SETTLE_SPEED / 100);
            this.velx -= this.velx * (1 - VELOCITY_RETENTION);
            this.vely -= this.vely * (1 - VELOCITY_RETENTION);
        }

        this.scatter = function () {
            const unit = this.unitVecToMouse();
            const vel = SCATTER_VELOCITY * 10 * (0.5 + Math.random() / 2);
            this.velx = -unit.x * vel;
            this.vely = -unit.y * vel;
        }

        this.move = function () {
            if (this.distanceToMouse() <= FLEE_DISTANCE) {
                this.fleeFrom();
            } else {
                this.settleTo();
            }

            if (this.x + this.velx < 0 || this.x + this.velx >= canvas.width) {
                this.velx *= -1;
            }
            if (this.y + this.vely < 0 || this.y + this.vely >= canvas.height) {
                this.vely *= -1;
            }

            this.x += this.velx;
            this.y += this.vely;
        }
        this.distanceToMouse = function () {
            return this.distanceTo(MOUSE.x, MOUSE.y);
        }

        this.distanceTo = function (x, y) {
            return Math.sqrt((x - this.x) * (x - this.x) + (y - this.y) * (y - this.y));
        }
        this.unitVecToMouse = function () {
            return this.unitVecTo(MOUSE.x, MOUSE.y);
        }

        this.unitVecTo = function (x, y) {
            const dx = x - this.x;
            const dy = y - this.y;
            return {
                x: dx / Math.sqrt(dx * dx + dy * dy),
                y: dy / Math.sqrt(dx * dx + dy * dy)
            };
        }
    }

    window.addEventListener("resize", function () {
        resizeCanvas()
        adjustText()
    });

    if (FLEE) {
        window.addEventListener("mousemove", function (event) {
            MOUSE.x = event.clientX;
            MOUSE.y = event.clientY;
        });
    }

    if (SCATTER) {
        window.addEventListener("click", function (event) {
            MOUSE.x = event.clientX;
            MOUSE.y = event.clientY;
            for (let i = 0; i < POINTS.length; i++) {
                POINTS[i].scatter();
            }
        });
    }

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }

    function adjustText() {
        ctx.fillStyle = COLOR;
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        ctx.font = FONT_SIZE + "px Arial";
        ctx.fillText(MESSAGE, canvas.width / 2, canvas.height / 2);
        const textWidth = ctx.measureText(MESSAGE).width;
        if (textWidth === 0) {
            return;
        }
        const minX = canvas.width / 2 - textWidth / 2;
        const minY = canvas.height / 2 - FONT_SIZE / 2;
        const data = ctx.getImageData(minX, minY, textWidth, FONT_SIZE).data;
        let isBlank = true;
        for (let i = 0; i < data.length; i++) {
            if (data[i] !== 0) {
                isBlank = false;
                break;
            }
        }

        if (!isBlank) {
            let count = 0;
            let curr = 0;
            let num = 0;
            let x = 0;
            let y = 0;
            const w = Math.floor(textWidth);
            POINTS = [];
            while (count < AMOUNT) {
                while (curr === 0) {
                    num = Math.floor(Math.random() * data.length);
                    curr = data[num];
                }
                num = Math.floor(num / 4);
                x = w / 2 - num % w;
                y = FONT_SIZE / 2 - Math.floor(num / w);
                POINTS.push(new Point(x, y, data[num * 4], data[num * 4 + 1], data[num * 4 + 2], data[num * 4 + 3]));
                curr = 0;
                count++;
            }
        }
    }

    function init() {
        resizeCanvas()
        adjustText()
        window.requestAnimationFrame(animate);
    }

    function animate() {
        update();
        draw();
    }

    function update() {
        let point;
        for (let i = 0; i < POINTS.length; i++) {
            point = POINTS[i];
            point.move();
        }
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        let point;
        for (let i = 0; i < POINTS.length; i++) {
            point = POINTS[i];
            ctx.fillStyle = "rgba(" + point.r + "," + point.g + "," + point.b + "," + point.a + ")";
            ctx.beginPath();
            ctx.arc(point.getX(), point.getY(), SIZE, 0, 2 * Math.PI);
            ctx.fill();
        }

        window.requestAnimationFrame(animate);
    }

    init();
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235

    emmmm…是真的很多诶，而且我这还就只放了一个文本，后面再加上其他的页面元素，不利于后期维护的，当然，随您高兴着来。

    好哒，各位大佬发挥各自的想象力去调试吧，小阿凡麻溜的润咯~
    在这里插入图片描述

  • 相关阅读:
    如何从命令行运行3dMax脚本（MAXScript或Python）？
    2024蓝桥杯每日一题（BFS）
    854算法之线性表
    HTTP,HTTPS,WebSocket协议辨析
    数据库的三范式
    SpringBoot - @PostConstruct 注解详解
    MySql主从复制
    KITTI 3D 数据可视化
    汽车驾驶智能座舱太阳光模拟器老化试验
    7-42 子集和问题——组合子集
  • 原文地址：https://blog.csdn.net/m0_46700215/article/details/126963561