网页背景炫酷升级：5步教你用Canvas打造会‘躲猫猫’的粒子特效

最新推荐文章于 2026-04-17 10:30:04 发布

原创

最新推荐文章于 2026-04-17 10:30:04 发布 · 1k 阅读

标签

#前端 #Canvas #粒子动画 #交互设计 #ViewUI

网页背景炫酷升级：5步教你用Canvas打造会‘躲猫猫’的粒子特效

你是否厌倦了千篇一律的静态背景？想让你的个人作品集、官网或者产品展示页在用户打开的一瞬间就抓住眼球？那种鼠标划过时粒子如精灵般聚拢，点击时又像受惊的鱼群般散开的动态效果，早已成为高端设计感的代名词。这不仅仅是视觉上的炫技，更是一种与访客建立情感连接的巧妙方式。今天，我们就来亲手拆解这个看似复杂、实则有趣的“躲猫猫”粒子系统，用五步清晰的路径，让你也能为自己的项目注入这份灵动的生命力。

本文面向有一定HTML、CSS和JavaScript基础的网页设计师与前端开发者。我们将从零开始，构建一个完整的、具备响应式适配能力的Canvas粒子动画背景。整个过程，我们将重点关注交互逻辑的设计与性能的优化，而不仅仅是代码的堆砌。你会发现，理解粒子如何“思考”与“反应”，远比记忆API更有趣。

1. 搭建舞台：初始化Canvas与核心参数

万事开头难，但搭建Canvas舞台却出奇地简单。我们的第一步，是为粒子们创造一个可以自由舞动的画布，并定义好这场演出的基本规则。

首先，在HTML中创建一个全屏的Canvas元素。这里的关键在于，要确保它能够覆盖整个视口，并且位于所有内容之下，作为背景层。

<!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; }
        #particle-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: block;
            z-index: -1; /* 确保作为背景 */
        }
        /* 你的页面内容可以放在这里 */
        .content {
            position: relative;
            z-index: 1;
            color: white;
            padding: 2rem;
        }
    </style>
</head>
<body>
    <canvas id="particle-canvas"></canvas>
    <div class="content">
        <h1>你的精彩内容在此呈现</h1>
        <p>粒子背景将在此文字后方优雅律动。</p>
    </div>
    <script src="https://blog.csdn.net/particle.js"></script>
</body>
</html>

接下来，在JavaScript文件（例如particle.js）中，我们获取Canvas上下文，并设置一系列控制全局效果的参数。这些参数是你的“调色板”和“导演指令”，调整它们可以创造出截然不同的视觉效果。

const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');

// 核心参数配置
let config = {
    particleCount: 120,           // 粒子数量：影响密度和性能
    particleRadius: 1.5,          // 粒子半径
    particleColor: 'rgba(255, 255, 255, 0.7)', // 粒子颜色与透明度
    lineMaxDistance: 150,         // 粒子间连线的最大距离
    lineColor: 'rgba(255, 255, 255, 0.1)', // 连线基础颜色
    mouseInfluenceRadius: 100,    // 鼠标“引力”影响半径
    mouseRepelForce: 35,          // 点击时排斥力强度
    hoverConnection: true,         // 鼠标悬停时是否与粒子连线
    connectionOpacity: 0.5,        // 连线最大不透明度
};

let width = window.innerWidth;
let height = window.innerHeight;
let particles = [];
let mouse = { x: null, y: null, isActive: false };
let animationId = null;

// 立即设置画布尺寸
function resizeCanvas() {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

提示：将配置参数集中在一个config对象中是个好习惯。这让你未来调整效果时，无需在代码海洋里四处搜寻，只需修改这个对象即可。例如，想营造更密集的星空感，就增加particleCount；想创造更疏离、清冷的感觉，就减小lineMaxDistance。

2. 创造生命：粒子类的设计与初始化

粒子是这场动画的主角。我们需要定义一个Particle类，赋予每个粒子位置、速度、加速度等物理属性，以及绘制和更新自身状态的能力。这才是面向对象编程思想在动画中的美妙体现。

class Particle {
    constructor() {
        // 随机初始位置
        this.x = Math.random() * width;
        this.y = Math.random() *

最低0.47元/天解锁文章