HTML怎么设置文本粒子效果？JS实现粒子文字-html教程-PHP中文网

HTML怎么设置文本粒子效果？JS实现粒子文字

星降

发布： 2025-06-27 18:43:01

原创

341人浏览过

要实现html文本粒子效果，需使用canvas元素与javascript控制粒子运动。1.通过canvas绘制文字并提取像素数据生成粒子；2.利用js定义粒子类并控制其动态行为；3.结合鼠标事件实现交互效果；4.优化性能可通过减少粒子数、缓存canvas、避免重复绘制等方式；5.提升视觉效果可添加颜色变化、形状变换、复杂运动轨迹及滤镜；6.实现响应式布局需采用相对单位、动态调整粒子数量及监听窗口变化。

HTML怎么设置文本粒子效果？JS实现粒子文字

HTML设置文本粒子效果，核心在于利用Canvas元素，通过JS控制粒子的运动和渲染，模拟文本的形态。关键在于将文字信息转化为粒子数据，再利用JS操控这些粒子，最终在Canvas上呈现出视觉效果。

解决方案

HTML结构： 准备一个Canvas元素，作为粒子效果的容器。
```
<canvas id="particleCanvas"></canvas>
```
登录后复制
CSS样式： 设置Canvas的尺寸和背景色，确保粒子效果能清晰展示。

立即学习“前端免费学习笔记（深入）”；
```
#particleCanvas {
    width: 800px;
    height: 400px;
    background-color: #000;
}
```
登录后复制

JS代码： 这是核心部分，包括获取Canvas上下文，创建粒子数组，以及动画循环。

const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 400;

const text = 'Hello World'; // 要显示的文字
const fontSize = 100;
const particles = [];
const particleColor = '#fff';

// 粒子类
class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 3 + 1;
        this.baseX = x;
        this.baseY = y;
        this.density = (Math.random() * 30) + 1;
    }
    draw() {
        ctx.fillStyle = particleColor;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
    }
    update() {
        let dx = mouse.x - this.x;
        let dy = mouse.y - this.y;
        let distance = Math.sqrt(dx * dx + dy * dy);
        let forceDirectionX = dx / distance;
        let forceDirectionY = dy / distance;
        let force = Math.max(15 - distance / 10, 0); // 调整影响范围和强度
        let directionX = forceDirectionX * force * this.density;
        let directionY = forceDirectionY * force * this.density;

        if (distance < 150) {
            this.x -= directionX;
            this.y -= directionY;
        } else {
            if (this.x !== this.baseX) {
                let dx = this.x - this.baseX;
                this.x -= dx / 5;
            }
            if (this.y !== this.baseY) {
                let dy = this.y - this.baseY;
                this.y -= dy / 5;
            }
        }
    }
}

// 鼠标位置
let mouse = {
    x: null,
    y: null
};

window.addEventListener('mousemove', function(event) {
    mouse.x = event.x - canvas.offsetLeft;
    mouse.y = event.y - canvas.offsetTop;
});

// 将文字转换为粒子
function textToParticles() {
    ctx.fillStyle = 'white';
    ctx.font = fontSize + 'px Verdana';
    ctx.fillText(text, 0, fontSize);
    const textData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (let y = 0; y < textData.height; y++) {
        for (let x = 0; x < textData.width; x++) {
            if (textData.data[(y * 4 * textData.width) + (x * 4) + 3] > 128) {
                let positionX = x;
                let positionY = y;
                particles.push(new Particle(positionX, positionY));
            }
        }
    }
}

// 初始化
function init() {
    textToParticles();
}

// 动画循环
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < particles.length; i++) {
        particles[i].draw();
        particles[i].update();
    }
    requestAnimationFrame(animate);
}

init();
animate();

登录后复制