当前位置：首页 > 文章列表 > 文章 > 前端 > HTML粒子文字效果实现教程

HTML粒子文字效果实现教程

2025-06-30 14:20:29 0浏览收藏

解决方案

HTML结构： 准备一个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();