❤️创意网页：创建更炫酷的动态网页——彩色数字（1到9）粒子动画

命运之光

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

2520

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

介绍

在这篇技术博客中，我们将学习如何创建一个令人惊叹的动态网页效果。我们将使用HTML5的Canvas元素和JavaScript来实现一个彩色数字粒子动画。这个动画将在浏览器中展示一组随机位置和颜色的彩色数字粒子，它们将以不同的速度从画布顶部飘落至底部，并循环重新开始，形成一个华丽的视觉效果。

动态图展示

静态图展示

图片1

图片2

HTML 结构

首先，我们需要创建一个包含Canvas元素的HTML结构。Canvas是一个用于绘制图形的HTML元素，它允许我们通过JavaScript动态绘制内容。

<!DOCTYPE html>
<html>
<head>
    <title>更炫酷的动态网页示例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        // JavaScript 代码将在这里添加
    </script>
</body>
</html>

JavaScript 代码

接下来，我们将使用JavaScript来创建粒子效果。我们将定义一个Particle类来表示每个彩色数字粒子，并使用Canvas的上下文绘制这些粒子。

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

// 设置canvas的宽度和高度
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 粒子对象
class Particle {
    constructor(x, y, digit) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 10 + 10; // 随机大小，修改范围为10到20
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
        this.velocityY = Math.random() * 3 + 1; // 随机竖直速度
        this.digit = digit; // 数字
    }

    // 更新粒子的位置
    update() {
        this.y += this.velocityY;

        // 当粒子到达画布底部时，重新放置到画布顶部
        if (this.y > canvas.height) {
            this.y = 0;
        }
    }

    // 绘制粒子
    draw() {
        ctx.font = `${this.size}px Arial`;
        ctx.fillStyle = this.color;
        ctx.fillText(this.digit, this.x, this.y);
    }
}

// 创建粒子数组
const particles = [];
const numParticles = 100;

// 初始化粒子
for (let i = 0; i < numParticles; i++) {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    const digit = Math.floor(Math.random() * 9) + 1; // 生成1到9的数字
    particles.push(new Particle(x, y, digit));
}

// 动画循环函数
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();
    }

    requestAnimationFrame(animate);
}

// 启动动画
animate();

分析代码

我们首先通过document.getElementById获取Canvas元素，并通过getContext('2d')获取绘图上下文。
设置Canvas的宽度和高度为浏览器窗口的宽度和高度，以使画布充满整个窗口。
创建一个Particle类来表示每个粒子。每个粒子具有随机的大小、颜色和竖直速度，以及一个表示1到9之间随机整数的数字。
初始化粒子数组，并在画布上随机位置创建一定数量的粒子。
定义animate函数来清空画布并更新、绘制所有的粒子。我们使用requestAnimationFrame来实现连续的动画效果。
最后，调用animate函数启动动画。

完整代码

<!DOCTYPE html>
<html>
<head>
    <title>更炫酷的动态网页示例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        // 获取canvas元素和绘图上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 设置canvas的宽度和高度
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 粒子对象
        class Particle {
            constructor(x, y, digit) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 10 + 10; // 随机大小，修改范围为10到20
                this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
                this.velocityY = Math.random() * 3 + 1; // 随机竖直速度
                this.digit = digit; // 数字
            }

            // 更新粒子的位置
            update() {
                this.y += this.velocityY;

                // 当粒子到达画布底部时，重新放置到画布顶部
                if (this.y > canvas.height) {
                    this.y = 0;
                }
            }

            // 绘制粒子
            draw() {
                ctx.font = `${this.size}px Arial`;
                ctx.fillStyle = this.color;
                ctx.fillText(this.digit, this.x, this.y);
            }
        }

        // 创建粒子数组
        const particles = [];
        const numParticles = 100;

        // 初始化粒子
        for (let i = 0; i < numParticles; i++) {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            const digit = Math.floor(Math.random() * 9) + 1; // 生成1到9的数字
            particles.push(new Particle(x, y, digit));
        }

        // 动画循环函数
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
            }

            requestAnimationFrame(animate);
        }

        // 启动动画
        animate();
    </script>
</body>
</html>

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本

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

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

总结

通过以上步骤，我们成功创建了一个令人惊叹的动态网页效果——彩色数字粒子动画。每次刷新页面，你都会看到不同位置、不同颜色的彩色数字粒子在画布上飘落。这个效果利用了Canvas和JavaScript来实现动态绘制和更新，创造了一个视觉上引人注目的交互体验。你可以在自己的网站中嵌入这个代码，也可以根据需要进行扩展和改进，例如调整粒子数量、大小和速度，或者添加交互功能。希望这篇技术博客对你了解动态网页制作有所帮助！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-07-29，如有侵权请联系 cloudcommunity@tencent.com 删除

数组