社区首页 >专栏 >❤️创意网页：创意视觉效果粒子循环的网页动画

❤️创意网页：创意视觉效果粒子循环的网页动画

命运之光

发布于 2024-03-20 04:43:42

24200

代码可运行

文章被收录于专栏：我在本科期间写的文章我在本科期间写的文章

运行总次数：0

代码可运行

介绍

在这篇技术博客中，我们将学习如何使用HTML5 Canvas和JavaScript创建一个视觉效果震撼的网页动画。我们将绘制一组随机颜色和运动的粒子，通过鼠标的移动产生交互效果，营造出一个令人惊叹的视觉效果。本项目将为您展示如何利用Canvas绘制动态粒子效果，并实现鼠标交互效果的加持。

动态图展示

准备工作

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

基本的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代码来实现这个视觉效果震撼的网页动画。

<!-- ... 上面的HTML代码 ... -->

<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>

以上代码中，我们创建了一个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>