关于javascript粒子特效。

小甜 • 2024年6月24日 09:52 • 网站搭建 • 阅读 0

在HTML5中，我们可以使用Canvas和JavaScript来实现粒子特效，粒子特效通常用于创建动画背景、广告横幅、网站头部等视觉效果，在本教程中，我们将学习如何使用HTML5、CSS3和JavaScript创建一个基本的粒子效果。

（图片来源网络，侵删）

1、准备工作

我们需要在HTML文件中创建一个<canvas>元素，用于绘制粒子特效，我们需要引入一个外部的JavaScript文件，用于编写粒子特效的逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>粒子特效</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="particles"></canvas>
    <script src="particles.js"></script>
</body>
</html>

2、编写粒子特效逻辑

接下来，我们在particles.js文件中编写粒子特效的逻辑，我们需要获取<canvas>元素的引用，并设置其宽度和高度，我们创建一个Particle构造函数，用于生成粒子对象，我们编写一个draw函数，用于绘制粒子特效。

const canvas = document.getElementById(\'particles\');
const ctx = canvas.getContext(\'2d\');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 5 + 1;
        this.speedX = Math.random() * 3 1.5;
        this.speedY = Math.random() * 3 1.5;
        this.color = hsl(${Math.random() * 360}, 100%, 50%);
    }
    update() {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.size > 0.2) this.size = 0.1;
    }
    draw() {
        ctx.fillStyle = this.color;
        ctx.strokeStyle = \'#fff\';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    }
}

3、初始化粒子数组并绘制粒子特效

现在，我们需要初始化一个粒子数组，并在draw函数中遍历这个数组，绘制每个粒子，我们需要监听窗口的resize事件，以便在窗口大小改变时更新画布的大小，我们需要使用requestAnimationFrame函数来不断更新粒子的位置和绘制粒子特效。

let particlesArray;
function init() {
    particlesArray = [];
    for (let i = 0; i < 100; i++) {
        particlesArray.push(new Particle(Math.random() * canvas.width, Math.random() * canvas.height));
    }
}
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < particlesArray.length; i++) {
        particlesArray[i].update();
        particlesArray[i].draw();
        if (particlesArray[i].size <= 0.2) {
            particlesArray.splice(i, 1);
            i;
        }
    }
    requestAnimationFrame(draw);
}
init();
draw();

至此，我们已经完成了一个简单的粒子特效的实现，你可以根据需要修改粒子的颜色、速度、大小等属性，或者添加更多的交互功能，希望这个教程能帮助你入门HTML5粒子特效的制作。

本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/440814.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除