前端小实战：原生JS实现高颜值动态粒子背景主页

一、前言

在前端页面开发中，静态纯色背景已经很难满足现代页面的视觉需求。无论是个人作品集、技术展示页、登录首页，动态粒子背景都是性价比极高的提升方案：视觉效果炫酷、代码量可控、运行流畅、适配所有设备。

市面上大部分粒子背景特效都基于成熟插件，代码黑盒严重，不利于学习。本篇文章带大家从零手写 Canvas 粒子动态背景，全程原生 JS，没有任何封装依赖，每一行代码都可以自定义修改，非常适合用来夯实前端动画与 Canvas 绘图基础。同时项目轻量化、无部署压力，非常适合作为华为云开发者社区实战投稿内容。

二、项目技术栈与功能介绍

2.1 技术栈

本项目采用纯原生前端技术，零第三方依赖：

• HTML5 Canvas：实现粒子绘制、线条渲染、动态动画

• CSS3：全屏自适应布局、深色科技风格、居中文字UI

• 原生 JavaScript：粒子生成、运动轨迹计算、鼠标监听、距离算法、帧动画刷新

2.2 核心功能

• 全屏随机粒子自动飘动，运动平缓自然

• 粒子间距达到阈值自动连线，形成动态网格效果

• 鼠标悬浮区域吸附粒子，产生聚集特效

• 窗口大小自适应，自动重绘画布

• 轻量化动画，低配置设备也能流畅运行

三、核心原理讲解

3.1 Canvas 全屏渲染机制

Canvas 是 HTML5 提供的绘图画布，通过 JS 可以动态绘制图形、线条、动画。本项目将画布宽高设置为浏览器可视区域大小，实现全屏背景覆盖。每次窗口变化自动重置画布尺寸，保证动画无留白、无拉伸变形。

3.2 粒子运动逻辑

程序初始化时批量生成粒子对象，每个粒子包含坐标、移动速度、半径等属性。通过 requestAnimationFrame 帧动画持续更新粒子坐标，到达边界后反向运动，实现无限循环飘动效果。相比 setInterval，帧动画更加流畅，不会出现卡顿、丢帧问题。

3.3 粒子连线算法

遍历所有粒子，通过欧式距离公式计算两个粒子之间的距离，当距离小于设定阈值时，自动绘制渐变连线。距离越近线条越清晰，距离越远线条越透明，视觉层次感极强。同时监听鼠标坐标，让鼠标附近的粒子产生吸附效果，交互质感拉满。

四、完整可运行源码

以下代码直接新建 HTML 文件粘贴即可运行，无需环境配置、无需依赖包。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态粒子背景主页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            overflow: hidden;
            background: #05101f;
        }
        canvas {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .text-box {
            position: fixed;
            z-index: 2;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #4fc3f7;
            text-shadow: 0 0 10px rgba(79,195,247,0.5);
        }
        .text-box h1 {
            font-size: 48px;
            margin-bottom: 15px;
        }
        .text-box p {
            font-size: 18px;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div class="text-box">
        <h1>Hello World</h1>
        <p>原生 Canvas 动态粒子特效 · 前端实战演示</p>
    </div>

    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        let w, h;
        let points = [];
        const num = 80; // 粒子数量
        let mouse = { x: null, y: null, r: 120 };

        // 适配全屏
        function resize() {
            w = canvas.width = window.innerWidth;
            h = canvas.height = window.innerHeight;
        }
        resize();
        window.addEventListener("resize", resize);

        // 粒子类
        class Point {
            constructor() {
                this.x = Math.random() * w;
                this.y = Math.random() * h;
                this.r = Math.random() * 1.5 + 0.5;
                this.speedX = Math.random() * 0.6 - 0.3;
                this.speedY = Math.random() * 0.6 - 0.3;
            }
            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                // 边界反弹
                if (this.x < 0 || this.x > w) this.speedX *= -1;
                if (this.y < 0 || this.y > h) this.speedY *= -1;
                // 鼠标吸附
                let dx = this.x - mouse.x;
                let dy = this.y - mouse.y;
                let dis = Math.sqrt(dx * dx + dy * dy);
                if (dis < mouse.r) {
                    this.x -= dx * 0.06;
                    this.y -= dy * 0.06;
                }
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                ctx.fillStyle = "#4fc3f7";
                ctx.fill();
            }
        }

        // 初始化粒子
        function init() {
            points = [];
            for (let i = 0; i < num; i++) {
                points.push(new Point());
            }
        }

        // 粒子连线
        function line() {
            for (let i = 0; i < points.length; i++) {
                for (let j = i + 1; j < points.length; j++) {
                    let dx = points[i].x - points[j].x;
                    let dy = points[i].y - points[j].y;
                    let dis = Math.sqrt(dx * dx + dy * dy);
                    if (dis < 80) {
                        ctx.beginPath();
                        ctx.moveTo(points[i].x, points[i].y);
                        ctx.lineTo(points[j].x, points[j].y);
                        ctx.strokeStyle = `rgba(79,195,247,${1 - dis/80})`;
                        ctx.lineWidth = 0.5;
                        ctx.stroke();
                    }
                }
            }
        }

        // 动画渲染
        function render() {
            ctx.clearRect(0, 0, w, h);
            for (let i = 0; i < points.length; i++) {
                points[i].update();
                points[i].draw();
            }
            line();
            requestAnimationFrame(render);
        }

        // 鼠标监听
        window.addEventListener("mousemove",(e)=>{
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        })

        init();
        render();
    </script>
</body>
</html>

五、关键知识点总结

5.1 Canvas 绘图流程

Canvas 动画遵循「清空画布-更新数据-重新绘制」的循环逻辑。通过 requestAnimationFrame 持续执行渲染函数，实现流畅动画效果。相比于定时器，帧动画能够跟随浏览器刷新率渲染，更加稳定、节能。

5.2 面向对象封装思想

项目通过 Class 类封装粒子属性和行为，每一个粒子都是独立实例，代码结构清晰、便于维护拓展。这是前端进阶必备的面向对象编程思想，适合新手学习复用。

5.3 距离计算与动态连线

利用初中数学两点距离公式，判断粒子间距并动态绘制线条，根据距离动态改变透明度，实现极具科技感的网格效果。该逻辑可以复用在可视化连线、拓扑图、力导向图等场景。

5.4 鼠标交互吸附逻辑

监听鼠标坐标，计算粒子与鼠标的距离，近距离粒子向鼠标位置偏移，实现磁吸交互特效，大幅提升页面交互质感。

六、项目拓展与优化方向

本粒子背景项目可直接用于个人主页、后台登录页、作品展示首页。开发者可以自行拓展更多功能：支持移动端触摸交互、点击生成爆炸粒子、切换多种配色主题、增加粒子快慢速度调节、适配深色浅色模式等。

同时代码完全开源轻量化，可直接上传 GitCode 配合华为云作品展览馆发布，作为高质量前端实战作品归档。

七、总结

本篇文章通过原生 Canvas 手写动态粒子背景，完整实现了粒子飘动、动态连线、鼠标磁吸、全屏自适应等效果。项目没有复杂架构、没有冗余代码，以小见大讲解了前端动画、图形绘制、数学算法、交互监听等核心知识点。非常适合前端新手巩固基础、积累实战项目，同时也适合作为社区原创技术博客投稿，轻松完成日常技术复盘与任务打卡。

（注：部分内容由豆包工作 AI 生成）