❤️创意网页：震撼视觉效果2（真的十分好看） - 创造炫酷的粒子动画

命运之光

已于 2023-08-03 18:21:56 修改

阅读量186

点赞数 2

分类专栏： Web前端 # 创意网页 # web网页制作文章标签：算法 HTML 奇思妙想创意网页 web前端

于 2023-07-30 00:01:18 首次发布

本文链接：https://blog.csdn.net/VLOKL/article/details/132001772

版权

web网页制作同时被 3 个专栏收录

42 篇文章 11 订阅

订阅专栏

创意网页

39 篇文章 7 订阅

订阅专栏

Web前端

34 篇文章 3 订阅

订阅专栏

✨博主：命运之光

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！

🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。

🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。

🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

总结

简介

欢迎来到本篇技术博客！今天，我们将一起学习如何使用HTML5 Canvas和JavaScript创造震撼的视觉效果。我们将绘制彩色粒子，使其在鼠标移动的轨迹上生成，形成炫酷的粒子动画。让我们开始吧！

动态图展示

准备工作

在开始之前，我们需要做一些准备工作：

确保您有一个支持HTML5的现代web浏览器（如Chrome、Firefox、Safari等）。
创建一个HTML文件，并复制以下代码作为基础：

<!DOCTYPE html>
<html>
<head>
    <title>震撼视觉效果</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        // JavaScript代码将在下面添加
    </script>
</body>
</html>

绘制彩色粒子

在我们的HTML文件中，我们已经有了一个空的Canvas元素，其ID为canvas，并且我们已经设置了Canvas的宽度和高度与窗口大小相同。接下来，我们将添加JavaScript代码来绘制彩色粒子。

// 获取Canvas元素和2D绘图上下文
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const particles = [];
const colors = ["#FFD700", "#FF6347", "#00FFFF", "#FF69B4", "#32CD32", "#FF4500", "#00CED1", "#FFFF00"];

// 创建粒子对象
class Particle {
    // ... 粒子构造函数的代码 ...
}

// 创建粒子
function createParticles(x, y) {
    // ... 创建粒子的代码 ...
}

// 鼠标移动事件
canvas.addEventListener("mousemove", (e) => {
    // ... 鼠标移动事件的代码 ...
});

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 更新和绘制粒子
    for (let i = particles.length - 1; i >= 0; i--) {
        const particle = particles[i];
        particle.update();
        particle.draw();

        // 移除不可见或消失的粒子
        if (particle.size <= 0) {
            particles.splice(i, 1);
        }
    }
}

animate();

在这段代码中，我们定义了一个用于存储粒子的数组particles，以及一个包含了几种颜色的数组colors，我们将从中随机选择粒子的颜色。

接下来，我们创建了一个构造函数Particle来构造粒子对象，它将包含粒子的位置、颜色和大小等属性。在构造函数中，我们使用随机速度来使粒子有一个随机的方向运动。

最后，我们定义了一个createParticles函数，用于在鼠标移动事件中创建粒子。在动画循环函数animate中，我们使用requestAnimationFrame方法来循环绘制和更新每个粒子。在每一帧中，我们首先使用ctx.clearRect方法来清空画布，然后遍历每个粒子对象，分别调用其update和draw方法。

运行效果

现在，将上述HTML代码保存为一个HTML文件，并在浏览器中打开它。您将会看到一个黑色背景的页面，当您在页面上移动鼠标时，彩色粒子将根据鼠标移动的轨迹生成，并形成炫酷的视觉效果。

完整代码

<!DOCTYPE html>
<html>
<head>
    <title>震撼视觉效果</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

        // 设置画布大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const particles = [];
        const colors = ["#FFD700", "#FF6347", "#00FFFF", "#FF69B4", "#32CD32", "#FF4500", "#00CED1", "#FFFF00"];

        // 创建粒子对象
        class Particle {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.size = Math.random() * 10 + 5;
                this.vx = (Math.random() - 0.5) * 5;
                this.vy = (Math.random() - 0.5) * 5;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.size -= 0.1;
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        // 创建粒子
        function createParticles(x, y) {
            for (let i = 0; i < 10; i++) {
                const color = colors[Math.floor(Math.random() * colors.length)];
                const particle = new Particle(x, y, color);
                particles.push(particle);
            }
        }

        // 鼠标移动事件
        canvas.addEventListener("mousemove", (e) => {
            const mouseX = e.clientX;
            const mouseY = e.clientY;
            createParticles(mouseX, mouseY);
        });

        function animate() {
            requestAnimationFrame(animate);
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 更新和绘制粒子
            for (let i = particles.length - 1; i >= 0; i--) {
                const particle = particles[i];
                particle.update();
                particle.draw();

                // 移除不可见或消失的粒子
                if (particle.size <= 0) {
                    particles.splice(i, 1);
                }
            }
        }

        animate();
    </script>
</body>
</html>