视觉效果震撼的网页

创作时间:

作者:

@小白创作中心

视觉效果震撼的网页

引用

来源

https://cloud.tencent.com/developer/article/2398956

粒子动画是一种常见的网页视觉效果，通过模拟粒子的运动轨迹和相互作用，可以创造出令人惊叹的视觉效果。本文将详细介绍如何使用HTML5 Canvas和JavaScript创建一个视觉效果震撼的粒子动画，包括粒子的随机颜色、运动轨迹以及鼠标交互效果。

动态图展示

准备工作

在开始之前，请确保您已经具备以下条件：

基本的HTML、CSS和JavaScript知识。
一个支持HTML5的现代web浏览器（推荐使用最新版本的Chrome、Firefox、Safari等）。

HTML 结构

首先，让我们创建一个HTML文件，并添加必要的结构。

<!DOCTYPE html>
<html>
<head>
    <title>视觉效果震撼的网页</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // JavaScript代码将在下面添加
    </script>
</body>
</html>

在这个HTML结构中，我们定义了一个Canvas元素，用于绘制我们的视觉效果震撼的网页动画。

JavaScript 代码

现在，让我们添加JavaScript代码来实现这个视觉效果震撼的网页动画。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let mouseX = 0;
let mouseY = 0;
// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("mousemove", (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
});
class Particle {
    constructor(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.radius = Math.random() * 2 + 1;
        this.angleX = Math.random() * 6;
        this.angleY = Math.random() * 6;
    }
    update() {
        this.x += Math.sin(this.angleX) * 2;
        this.y += Math.sin(this.angleY) * 2;
        this.angleX += 0.01;
        this.angleY += 0.01;
    }
    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fill();
    }
}
const particles = [];
function createParticles() {
    for (let i = 0; i < 100; i++) {
        const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
        const particle = new Particle(canvas.width / 2, canvas.height / 2, color);
        particles.push(particle);
    }
}
function animate() {
    requestAnimationFrame(animate);
    ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();
    }
}
createParticles();
animate();

以上代码中，我们创建了一个Particle类来表示每个粒子。每个粒子都有其位置、颜色、大小和运动角度。我们监听鼠标移动事件，获取鼠标的坐标，然后通过粒子的位置和角度更新实现交互效果。最后，我们使用Canvas绘制了动态的粒子效果。

运行效果

将上述HTML代码保存为一个HTML文件，并在支持HTML5的现代web浏览器中打开它。您将会看到一个视觉效果震撼的网页动画，许多随机颜色和运动的粒子在画布上自由运动，并随着鼠标的移动而产生交互效果。

完整代码

<!DOCTYPE html>
<html>
<head>
    <title>❤️创意网页：创意视觉效果粒子循环的网页动画</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        let mouseX = 0;
        let mouseY = 0;
        // 设置画布大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        window.addEventListener("mousemove", (e) => {
            mouseX = e.clientX;
            mouseY = e.clientY;
        });
        class Particle {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.radius = Math.random() * 2 + 1;
                this.angleX = Math.random() * 6;
                this.angleY = Math.random() * 6;
            }
            update() {
                this.x += Math.sin(this.angleX) * 2;
                this.y += Math.sin(this.angleY) * 2;
                this.angleX += 0.01;
                this.angleY += 0.01;
            }
            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fill();
            }
        }
        const particles = [];
        function createParticles() {
            for (let i = 0; i < 100; i++) {
                const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
                const particle = new Particle(canvas.width / 2, canvas.height / 2, color);
                particles.push(particle);
            }
        }
        function animate() {
            requestAnimationFrame(animate);
            ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
            }
        }
        createParticles();
        animate();
    </script>
</body>
</html>