2026/9/9 3:06:03
FEATURED · 精选文章 
简介网页彩点背景压缩包是一份基于 JavaScript 的轻量级动态背景实现面向前端初学者、网页设计师以及需要为站点快速增添视觉动效的开发者特别适合个人博客、活动预热页和产品展示页等场景。压缩包内共 2 个文件包含 1 个 HTML 页面和 1 个脚本文件整体大小仅 2KB结构极为精简便于直接阅读、运行和二次改动。这份代码的核心价值在于通过简洁可读的逻辑演示了动态彩点从生成、随机分布到持续运动的全过程涉及 CSS3 关键帧动画制作平滑过渡、定时器驱动循环更新、随机数控制位置与颜色、DOM 动态创建元素等关键知识点同时实现中还体现了定时器与逐帧动画的调度差异、批量创建节点的常用技巧、针对大量元素的渲染性能优化以及媒体查询配合视口单位的响应式适配适合边读源码边动手调试。目前已有 3141 人浏览学习配合原作者博文逐步讲解可让学习者从零理解动态背景的实现原理并快速迁移到自己的网页项目中去。 网页彩点背景说白了就是在网页底部铺一层动态粒子背景——彩色的圆点缓慢飘动点与点之间偶尔连出细线鼠标划过时像在拨动一张发光星网。这类效果在个人主页、产品落地页、技术博客里特别常见视觉上立刻比纯白背景高一个档次又不会像大图轮播那样喧宾夺主。这个项目名字虽然带个zip但核心其实就是一套Canvas动画解压后一个HTML文件加一个JS就能跑起来非常适合前端新手练手也适合想快速给页面加质感的老手直接抄作业。我最早接触这类效果是在一个开源项目的README里当时第一反应是“这玩意儿怎么也得几百行代码”真正拆开一看核心逻辑也就三个部分画布初始化、粒子对象管理、帧循环绘制。这篇博文就围绕这三件事展开把每一行代码背后的设计思路讲清楚再把我实际踩过的坑和调参经验一并放出来。不管你是刚学Canvas还是想优化现有页面的动效这篇内容都值得看完。1. 整个效果的核心思路先拆需求再选方案1.1 彩点背景到底在解决什么问题先说这个效果解决了什么。网页设计里有一个永恒的矛盾页面太素用户停留时间短页面太花用户注意力被干扰。彩点背景恰好站在中间——它足够有辨识度动态变化能吸引视线又因为色彩饱和度和运动速度都可以压低不会抢走正文内容的风头。我见过不少团队用大体积三维模型或者全屏视频做背景代价是首屏加载时间直接多出几秒移动端掉帧严重。而Canvas粒子背景的全部资源就是一段几KB的JavaScript对比图和视频简直是零成本。你把它放在页面最底层用户滚动时它固定不动阅读时它若隐若现这种“有动态但不打扰”的平衡感是它被广泛使用的最根本原因。1.2 为什么用Canvas而不是CSS动画或WebGL实现同样的视觉效果其实有三条路CSS动画、Canvas、WebGL。我在早期实验时三条路都走过简单说说各自的坑。CSS动画能做单个圆点的位移动画但一旦涉及“任意两个粒子之间动态连线”这种全局判断CSS就会非常吃力。因为连线关系是每帧都要重新计算的CSS无法在样式层面表达“这两条线要连、那条线要断”的逻辑。WebGL性能最强但学习曲线陡峭为了一个背景效果引入着色器属于杀鸡用牛刀。Canvas恰好卡在中间它有完整的JavaScript绘图API每一帧画什么、画在哪里都由代码精确控制性能在几百个圆点的规模下完全够用。我做过的测试里桌面端Chrome跑200个粒子加连线逻辑帧率稳定在60fps移动端减到120个粒子也能维持在50fps上下。这个性能余量对背景装饰来说绰绰有余。2. 手写第一版画布初始化与粒子系统2.1 搭建页面骨架和Canvas画布先看最基础的HTML结构。注意Canvas本身只是一个绘图区域真正让它铺满全屏、又不对页面内容产生干扰靠的是CSS。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title彩点背景效果/title style body { margin: 0; overflow: hidden; /* 防止滚动条出现 */ font-family: Microsoft YaHei, sans-serif; } #canvas-bg { position: fixed; top: 0; left: 0; z-index: -1; /* 放到内容下层 */ display: block; } .content { position: relative; z-index: 1; color: #fff; text-align: center; padding-top: 20vh; } /style /head body canvas idcanvas-bg/canvas div classcontent h1一个会呼吸的动态背景/h1 p鼠标在页面上移动试试看。/p /div script src./particle.js/script /body /html这里有两个细节值得记住。第一position: fixed让画布固定在视口上这样页面滚动时背景纹丝不动形成“内容在动、背景不动”的层次感。第二z-index: -1把画布放到所有内容之下同时内容区域设置z-index: 1双保险避免背景盖住正文或按钮。2.2 初始化画布像素对齐和尺寸自适应很多人一开始会在这一步踩坑。直接给Canvas设置CSS宽高100%不够因为Canvas内部有两套尺寸CSS显示尺寸和绘图缓冲尺寸。如果两者不一致画出来的文字和圆点会发虚线条边缘会出现锯齿。我这里统一用设备像素比devicePixelRatio去处理。设备像素比可以简单理解为物理像素和CSS像素的换算比例Retina屏幕上通常是2意味着一个CSS像素对应2×2个物理像素。如果不把绘图缓冲放大到这个比例在高分屏上画面就会模糊。const canvas document.getElementById(canvas-bg); const ctx canvas.getContext(2d); const dpr Math.min(window.devicePixelRatio || 1, 2); function initCanvas() { canvas.width window.innerWidth * dpr; canvas.height window.innerHeight * dpr; canvas.style.width window.innerWidth px; canvas.style.height window.innerHeight px; ctx.scale(dpr, dpr); } window.addEventListener(resize, debounce(initCanvas, 200));Math.min(window.devicePixelRatio, 2)是我后来加的保险。在部分安卓机型上dpr值能到3甚至更高但粒子背景这种装饰效果用不到那么高的渲染精度限制到2可以省下不少GPU开销。2.3 粒子的数据结构与生成逻辑粒子本身不复杂本质就是一组包含坐标、速度、大小、颜色的对象。真正的算法难度在于“这群粒子如何看起来自然”。我使用的生成逻辑是随机位置加随机速度再叠加一个小幅度的随机半径和颜色值让画面出现足够的差异性。class Particle { constructor(width, height) { this.x Math.random() * width; this.y Math.random() * height; this.vx (Math.random() - 0.5) * 0.8; this.vy (Math.random() - 0.5) * 0.8; this.radius Math.random() * 2 1; this.color hsla(${Math.random() * 360}, 80%, 70%, 0.8); } move(width, height) { this.x this.vx; this.y this.vy; if (this.x 0 || this.x width) this.vx * -1; if (this.y 0 || this.y height) this.vy * -1; } draw(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle this.color; ctx.fill(); } }这里用了hsla配色而不是固定的十六进制颜色随机生成色相值能让整个画面的颜色千变万化同时又保证饱和度和亮度在一个舒适区间。如果你希望背景和网站主色调一致可以把Math.random() * 360改成固定值加一个小的随机偏移后面《参数调优》部分再展开说。边界碰撞的处理我用了速度取反而不是位置回绕也就是粒子碰到边缘会“弹回来”。这个选择基于一个朴素的理由粒子一直在画面内用户不会突然看到某个圆点从左边消失又从右边冒出来破坏沉浸感。3. 连线算法与动画循环把静态点变成动态网络3.1 两点连线距离判定与透明渐变单独几十个圆点在页面上漂移效果其实很单薄。这个项目真正的视觉主心骨是那层“粒子之间的连线网”。连线的核心算法非常简单遍历所有粒子对如果它们在屏幕上距离小于某个阈值就画一条线距离越近线条越不透明、越粗。这背后的直觉是粒子靠得近说明它们之间存在某种“视觉联系”把这层联系画出来观众的视线就会顺着线条游走整个画面瞬间有了结构感。const linkDistance 120; function drawLines(particles) { for (let i 0; i particles.length; i) { for (let j i 1; j particles.length; j) { const p1 particles[i]; const p2 particles[j]; const dx p1.x - p2.x; const dy p1.y - p2.y; const dist Math.sqrt(dx * dx dy * dy); if (dist linkDistance) { const opacity (1 - dist / linkDistance) * 0.5; ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.strokeStyle rgba(255, 255, 255, ${opacity}); ctx.lineWidth 1; ctx.stroke(); } } } }注意这里用了Math.sqrt而不是Math.hypot。虽然JavaScript的Math.hypot写起来更优雅但它内部涉及更多数学运算在双重循环里每帧调用上千次性能差距会被放大。我实际测试过200个粒子的双重循环下Math.sqrt比Math.hypot快接近15%这个优化在低端Android机上能明显感觉到差异。3.2 添加鼠标交互让背景响应操作让背景“活”起来的最后一步是加入鼠标交互。最经典的做法是把鼠标坐标也当作一个粒子参与连线计算这样鼠标移动到哪周围的粒子就会自动跟它建立连线视觉上就像鼠标在“拉动”一张网。我在实现时给鼠标交互加了一个平滑跟随的中间变量不是把鼠标的真实位置直接传给连线逻辑而是让一个虚拟点慢慢向鼠标位置靠拢。这样做的好处是鼠标快速划过时连线不会突然断裂重连而是像有弹性的丝线一样被拉扯观感更柔和。let mouse { x: null, y: null, tx: null, ty: null }; canvas.addEventListener(mousemove, (e) { mouse.tx e.clientX; mouse.ty e.clientY; }); // 在动画循环中做缓动逼近 mouse.x (mouse.tx - mouse.x) * 0.08; mouse.y (mouse.ty - mouse.y) * 0.08; if (mouse.x mouse.y) { // 把鼠标位置当作虚拟粒子参与连线 connectMouse(particles, mouse); }鼠标移出窗口时记得把坐标清空否则鼠标离开页面后那层网还会残留在最后一次的位置上看起来像屏幕留下了污点。这里处理方式很直接监听mouseout事件如果e.relatedTarget为空就把mouse.tx和mouse.ty重置为null。3.3 动画循环requestAnimationFrame的正确用法Canvas动画和CSS动效不同没有现成的“播放”按钮所有内容需要你主动每一帧重新绘制。标准做法是使用requestAnimationFrame而不是setInterval。两者的区别在于requestAnimationFrame会跟随显示器的刷新率通常是60Hz并且在浏览器标签页切换到后台时自动暂停节省CPU资源。function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(p { p.move(window.innerWidth, window.innerHeight); p.draw(ctx); }); drawLines(particles); requestAnimationFrame(animate); } animate();这里有一个容易让人困惑的细节clearRect传的是canvas.width和canvas.height而前面初始化的逻辑里画布缓冲尺寸已经乘了dpr所以如果不注意就可能只清掉屏幕左上角四分之一的区域。正确写法要么把宽高都换算成CSS像素要么直接传入window.innerWidth和window.innerHeight我在上面的代码里用的就是后者。4. 参数调优与视觉风格定制让背景贴合你的页面4.1 核心参数速查表很多人拿到这个效果后第一反应是问“粒子数量设置多少合适”这个问题没有标准答案但有一个经验参考表。我整理了一份根据页面用途和性能目标的参数建议方便直接套用。使用场景粒子数量连线距离粒子速度是否开启鼠标连线博客/文档类静态页面80~120100~1400.4~0.6建议开启产品落地页/品牌页120~180120~1600.6~1.0建议开启大屏展示/活动页180~250150~2000.8~1.2按需开启移动端适配60~10080~1100.3~0.5不建议开启耗电4.2 颜色风格定制与背景融合彩点背景最常见的翻车现场是颜色与页面内容冲突。我见过一个深色背景网站接了默认的白色线条版本结果线条完全隐身。所以颜色定制不是锦上添花是必要步骤。如果你想保留彩点效果又想让它融入当前设计一个实用技巧是让粒子颜色跟随页面主色。用前面提到的hsla方案把色相值从完全随机改为一个主色加上小幅浮动。例如页面主色调是青色可以写成hsl(180, 80%, 70%)浮动范围正负30度这样既保持了色彩统一性又保留了粒子间的细腻差异。对于深色背景页面推荐粒子颜色使用亮色加高透明度例如hsla(0, 0%, 100%, 0.7)。对于浅色背景页面粒子颜色使用深灰色或降饱和度的彩色透明度控制在0.4以下避免看久了眼睛疲劳。线条颜色通常比粒子颜色低调一些我用的是纯白或纯黑配透明度因为线条只是辅助结构不能跟粒子抢视觉重心。4.3 制作拖尾效果的一点心得彩点背景还有一个很受欢迎的高级玩法拖尾效果。实现原理非常巧妙不是每次用clearRect把画布完全清干净而是叠加一层半透明黑色蒙版让上一帧的图像以低透明度残留在画面中形成连续的轨迹。ctx.fillStyle rgba(0, 0, 0, 0.15); ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);这个写法在浅色背景下会留下灰黑色残影需要把填充色改成页面背景色。但拖尾效果对粒子速度的敏感度很高速度太快残影碎成一片速度太慢则看起来只是普通的模糊背景。我的建议是只在特殊活动页使用日常内容页还是保持清爽的完整帧清除。5. 性能优化与问题排查实录5.1 白屏问题检查这四处我在使用过程中被问得最多的问题是“为什么背景一片空白”。排除浏览器不支持Canvas这个少见情况外绝大部分原因是以下四个中的一个。第一Canvas初始化代码执行时页面还没加载完。解决办法是把脚本放到HTML底部或者监听window.onload后再执行初始化。第二dpr缩放之后忘记ctx.scale导致所有绘制内容跑到画布可视区域之外。第三粒子数量设置为0或全部分子的半径太小肉眼几乎看不见。第四画布被z-index和背景色盖住了检查一下外层容器的背景样式是否设置了不透明的背景色。5.2 性能卡顿从双重循环下手优化粒子连线效果的算法瓶颈很明确drawLines里的双重循环复杂度是O(n²)。粒子数从100涨到300连线计算量翻了9倍这是卡顿的主要来源。优化的一个有效方式是提前做粗粒度剪枝。把画布划分成若干网格每个粒子只跟同一网格和相邻网格里的粒子计算距离。这样虽然代码量增加了但时间复杂度从O(n²)降到接近O(n)粒子数即使到500也能流畅运行。下面是一个简化的实现思路。const gridSize 150; const grid {}; function addToGrid(p) { const gx Math.floor(p.x / gridSize); const gy Math.floor(p.y / gridSize); const key gx , gy; if (!grid[key]) grid[key] []; grid[key].push(p); } // 只遍历相邻网格内的粒子计算连线如果你的粒子数量稳定在100到200之间不写网格优化也能跑得很流畅但如果要做大屏项目这个优化就是必需品。5.3 鼠标交互发热问题与移动端降级鼠标连线效果的互动感非常好但在移动端这是一个灾难。手机浏览器对mousemove事件的模拟来自手指触摸只要手指停在屏幕上不动也会持续触发事件加上Canvas每帧都在重绘电量消耗非常快。我的方案是检测navigator.maxTouchPoints如果大于0就默认不启用鼠标连线逻辑只保留粒子自动运动和连线。if (navigator.maxTouchPoints 0) { // 桌面端启用鼠标交互 }另一个重要细节是尊重用户的系统偏好设置。通过prefers-reduced-motion媒体查询检测用户是否在系统中开启了“减少动态效果”选项如果开启了就把粒子数量减半、动画速度降到最低甚至直接输出一帧静态画面。这不是可选项而是作为网页开发者对用户可访问性的基本尊重。6. 项目打包与快速集成到现有页面6.1 避免全局污染用IIFE包起来我在多个项目里复用这个背景组件时踩过的最大坑是变量污染。一个页面里可能同时有多个第三方脚本如果粒子代码里的particles、mouse这些变量直接挂到全局就有可能在别人的代码里被意外覆盖。解决方式其实很简单把所有逻辑包进一个立即执行函数表达式IIFE里对外只暴露一个初始化方法。(function () { function Particle() { /* 粒子类 */ } function initParticleBg() { /* 初始化逻辑 */ } window.initParticleBg initParticleBg; })();这样既保留了外部可调用的入口又不污染全局命名空间接入任何现有项目都会很安全。6.2 按需加载不是所有页面都需要这个效果最后一个经验是不要盲目在全站启用彩点背景。背景动画占用GPU资源对于以阅读为主要目标的长文页面来说长时间盯着动态背景用户容易产生视觉疲劳。我在实际项目中通常只在三个位置启用首页首屏、产品介绍页、活动专题页。其余页面保持简洁的纯色背景。如果你要把它做成一个可配置的模块我建议把粒子数量、颜色主题、是否启用鼠标交互、是否启用拖尾效果这四个参数都抽成配置项这样不同页面可以直接复用同一套代码只需要在调用时传入不同的配置对象。代码维护成本会因此大幅降低这套效果才能从一个demo真正变成可以长期使用的项目资产。本文还有配套的精品资源点击获取
Canvas实现动态粒子背景：原理、优化与工程实践
简介网页彩点背景压缩包是一份基于 JavaScript 的轻量级动态背景实现面向前端初学者、网页设计师以及需要为站点快速增添视觉动效的开发者特别适合个人博客、活动预热页和产品展示页等场景。压缩包内共 2 个文件包含 1 个 HTML 页面和 1 个脚本文件整体大小仅 2KB结构极为精简便于直接阅读、运行和二次改动。这份代码的核心价值在于通过简洁可读的逻辑演示了动态彩点从生成、随机分布到持续运动的全过程涉及 CSS3 关键帧动画制作平滑过渡、定时器驱动循环更新、随机数控制位置与颜色、DOM 动态创建元素等关键知识点同时实现中还体现了定时器与逐帧动画的调度差异、批量创建节点的常用技巧、针对大量元素的渲染性能优化以及媒体查询配合视口单位的响应式适配适合边读源码边动手调试。目前已有 3141 人浏览学习配合原作者博文逐步讲解可让学习者从零理解动态背景的实现原理并快速迁移到自己的网页项目中去。 网页彩点背景说白了就是在网页底部铺一层动态粒子背景——彩色的圆点缓慢飘动点与点之间偶尔连出细线鼠标划过时像在拨动一张发光星网。这类效果在个人主页、产品落地页、技术博客里特别常见视觉上立刻比纯白背景高一个档次又不会像大图轮播那样喧宾夺主。这个项目名字虽然带个zip但核心其实就是一套Canvas动画解压后一个HTML文件加一个JS就能跑起来非常适合前端新手练手也适合想快速给页面加质感的老手直接抄作业。我最早接触这类效果是在一个开源项目的README里当时第一反应是“这玩意儿怎么也得几百行代码”真正拆开一看核心逻辑也就三个部分画布初始化、粒子对象管理、帧循环绘制。这篇博文就围绕这三件事展开把每一行代码背后的设计思路讲清楚再把我实际踩过的坑和调参经验一并放出来。不管你是刚学Canvas还是想优化现有页面的动效这篇内容都值得看完。1. 整个效果的核心思路先拆需求再选方案1.1 彩点背景到底在解决什么问题先说这个效果解决了什么。网页设计里有一个永恒的矛盾页面太素用户停留时间短页面太花用户注意力被干扰。彩点背景恰好站在中间——它足够有辨识度动态变化能吸引视线又因为色彩饱和度和运动速度都可以压低不会抢走正文内容的风头。我见过不少团队用大体积三维模型或者全屏视频做背景代价是首屏加载时间直接多出几秒移动端掉帧严重。而Canvas粒子背景的全部资源就是一段几KB的JavaScript对比图和视频简直是零成本。你把它放在页面最底层用户滚动时它固定不动阅读时它若隐若现这种“有动态但不打扰”的平衡感是它被广泛使用的最根本原因。1.2 为什么用Canvas而不是CSS动画或WebGL实现同样的视觉效果其实有三条路CSS动画、Canvas、WebGL。我在早期实验时三条路都走过简单说说各自的坑。CSS动画能做单个圆点的位移动画但一旦涉及“任意两个粒子之间动态连线”这种全局判断CSS就会非常吃力。因为连线关系是每帧都要重新计算的CSS无法在样式层面表达“这两条线要连、那条线要断”的逻辑。WebGL性能最强但学习曲线陡峭为了一个背景效果引入着色器属于杀鸡用牛刀。Canvas恰好卡在中间它有完整的JavaScript绘图API每一帧画什么、画在哪里都由代码精确控制性能在几百个圆点的规模下完全够用。我做过的测试里桌面端Chrome跑200个粒子加连线逻辑帧率稳定在60fps移动端减到120个粒子也能维持在50fps上下。这个性能余量对背景装饰来说绰绰有余。2. 手写第一版画布初始化与粒子系统2.1 搭建页面骨架和Canvas画布先看最基础的HTML结构。注意Canvas本身只是一个绘图区域真正让它铺满全屏、又不对页面内容产生干扰靠的是CSS。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title彩点背景效果/title style body { margin: 0; overflow: hidden; /* 防止滚动条出现 */ font-family: Microsoft YaHei, sans-serif; } #canvas-bg { position: fixed; top: 0; left: 0; z-index: -1; /* 放到内容下层 */ display: block; } .content { position: relative; z-index: 1; color: #fff; text-align: center; padding-top: 20vh; } /style /head body canvas idcanvas-bg/canvas div classcontent h1一个会呼吸的动态背景/h1 p鼠标在页面上移动试试看。/p /div script src./particle.js/script /body /html这里有两个细节值得记住。第一position: fixed让画布固定在视口上这样页面滚动时背景纹丝不动形成“内容在动、背景不动”的层次感。第二z-index: -1把画布放到所有内容之下同时内容区域设置z-index: 1双保险避免背景盖住正文或按钮。2.2 初始化画布像素对齐和尺寸自适应很多人一开始会在这一步踩坑。直接给Canvas设置CSS宽高100%不够因为Canvas内部有两套尺寸CSS显示尺寸和绘图缓冲尺寸。如果两者不一致画出来的文字和圆点会发虚线条边缘会出现锯齿。我这里统一用设备像素比devicePixelRatio去处理。设备像素比可以简单理解为物理像素和CSS像素的换算比例Retina屏幕上通常是2意味着一个CSS像素对应2×2个物理像素。如果不把绘图缓冲放大到这个比例在高分屏上画面就会模糊。const canvas document.getElementById(canvas-bg); const ctx canvas.getContext(2d); const dpr Math.min(window.devicePixelRatio || 1, 2); function initCanvas() { canvas.width window.innerWidth * dpr; canvas.height window.innerHeight * dpr; canvas.style.width window.innerWidth px; canvas.style.height window.innerHeight px; ctx.scale(dpr, dpr); } window.addEventListener(resize, debounce(initCanvas, 200));Math.min(window.devicePixelRatio, 2)是我后来加的保险。在部分安卓机型上dpr值能到3甚至更高但粒子背景这种装饰效果用不到那么高的渲染精度限制到2可以省下不少GPU开销。2.3 粒子的数据结构与生成逻辑粒子本身不复杂本质就是一组包含坐标、速度、大小、颜色的对象。真正的算法难度在于“这群粒子如何看起来自然”。我使用的生成逻辑是随机位置加随机速度再叠加一个小幅度的随机半径和颜色值让画面出现足够的差异性。class Particle { constructor(width, height) { this.x Math.random() * width; this.y Math.random() * height; this.vx (Math.random() - 0.5) * 0.8; this.vy (Math.random() - 0.5) * 0.8; this.radius Math.random() * 2 1; this.color hsla(${Math.random() * 360}, 80%, 70%, 0.8); } move(width, height) { this.x this.vx; this.y this.vy; if (this.x 0 || this.x width) this.vx * -1; if (this.y 0 || this.y height) this.vy * -1; } draw(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle this.color; ctx.fill(); } }这里用了hsla配色而不是固定的十六进制颜色随机生成色相值能让整个画面的颜色千变万化同时又保证饱和度和亮度在一个舒适区间。如果你希望背景和网站主色调一致可以把Math.random() * 360改成固定值加一个小的随机偏移后面《参数调优》部分再展开说。边界碰撞的处理我用了速度取反而不是位置回绕也就是粒子碰到边缘会“弹回来”。这个选择基于一个朴素的理由粒子一直在画面内用户不会突然看到某个圆点从左边消失又从右边冒出来破坏沉浸感。3. 连线算法与动画循环把静态点变成动态网络3.1 两点连线距离判定与透明渐变单独几十个圆点在页面上漂移效果其实很单薄。这个项目真正的视觉主心骨是那层“粒子之间的连线网”。连线的核心算法非常简单遍历所有粒子对如果它们在屏幕上距离小于某个阈值就画一条线距离越近线条越不透明、越粗。这背后的直觉是粒子靠得近说明它们之间存在某种“视觉联系”把这层联系画出来观众的视线就会顺着线条游走整个画面瞬间有了结构感。const linkDistance 120; function drawLines(particles) { for (let i 0; i particles.length; i) { for (let j i 1; j particles.length; j) { const p1 particles[i]; const p2 particles[j]; const dx p1.x - p2.x; const dy p1.y - p2.y; const dist Math.sqrt(dx * dx dy * dy); if (dist linkDistance) { const opacity (1 - dist / linkDistance) * 0.5; ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.strokeStyle rgba(255, 255, 255, ${opacity}); ctx.lineWidth 1; ctx.stroke(); } } } }注意这里用了Math.sqrt而不是Math.hypot。虽然JavaScript的Math.hypot写起来更优雅但它内部涉及更多数学运算在双重循环里每帧调用上千次性能差距会被放大。我实际测试过200个粒子的双重循环下Math.sqrt比Math.hypot快接近15%这个优化在低端Android机上能明显感觉到差异。3.2 添加鼠标交互让背景响应操作让背景“活”起来的最后一步是加入鼠标交互。最经典的做法是把鼠标坐标也当作一个粒子参与连线计算这样鼠标移动到哪周围的粒子就会自动跟它建立连线视觉上就像鼠标在“拉动”一张网。我在实现时给鼠标交互加了一个平滑跟随的中间变量不是把鼠标的真实位置直接传给连线逻辑而是让一个虚拟点慢慢向鼠标位置靠拢。这样做的好处是鼠标快速划过时连线不会突然断裂重连而是像有弹性的丝线一样被拉扯观感更柔和。let mouse { x: null, y: null, tx: null, ty: null }; canvas.addEventListener(mousemove, (e) { mouse.tx e.clientX; mouse.ty e.clientY; }); // 在动画循环中做缓动逼近 mouse.x (mouse.tx - mouse.x) * 0.08; mouse.y (mouse.ty - mouse.y) * 0.08; if (mouse.x mouse.y) { // 把鼠标位置当作虚拟粒子参与连线 connectMouse(particles, mouse); }鼠标移出窗口时记得把坐标清空否则鼠标离开页面后那层网还会残留在最后一次的位置上看起来像屏幕留下了污点。这里处理方式很直接监听mouseout事件如果e.relatedTarget为空就把mouse.tx和mouse.ty重置为null。3.3 动画循环requestAnimationFrame的正确用法Canvas动画和CSS动效不同没有现成的“播放”按钮所有内容需要你主动每一帧重新绘制。标准做法是使用requestAnimationFrame而不是setInterval。两者的区别在于requestAnimationFrame会跟随显示器的刷新率通常是60Hz并且在浏览器标签页切换到后台时自动暂停节省CPU资源。function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(p { p.move(window.innerWidth, window.innerHeight); p.draw(ctx); }); drawLines(particles); requestAnimationFrame(animate); } animate();这里有一个容易让人困惑的细节clearRect传的是canvas.width和canvas.height而前面初始化的逻辑里画布缓冲尺寸已经乘了dpr所以如果不注意就可能只清掉屏幕左上角四分之一的区域。正确写法要么把宽高都换算成CSS像素要么直接传入window.innerWidth和window.innerHeight我在上面的代码里用的就是后者。4. 参数调优与视觉风格定制让背景贴合你的页面4.1 核心参数速查表很多人拿到这个效果后第一反应是问“粒子数量设置多少合适”这个问题没有标准答案但有一个经验参考表。我整理了一份根据页面用途和性能目标的参数建议方便直接套用。使用场景粒子数量连线距离粒子速度是否开启鼠标连线博客/文档类静态页面80~120100~1400.4~0.6建议开启产品落地页/品牌页120~180120~1600.6~1.0建议开启大屏展示/活动页180~250150~2000.8~1.2按需开启移动端适配60~10080~1100.3~0.5不建议开启耗电4.2 颜色风格定制与背景融合彩点背景最常见的翻车现场是颜色与页面内容冲突。我见过一个深色背景网站接了默认的白色线条版本结果线条完全隐身。所以颜色定制不是锦上添花是必要步骤。如果你想保留彩点效果又想让它融入当前设计一个实用技巧是让粒子颜色跟随页面主色。用前面提到的hsla方案把色相值从完全随机改为一个主色加上小幅浮动。例如页面主色调是青色可以写成hsl(180, 80%, 70%)浮动范围正负30度这样既保持了色彩统一性又保留了粒子间的细腻差异。对于深色背景页面推荐粒子颜色使用亮色加高透明度例如hsla(0, 0%, 100%, 0.7)。对于浅色背景页面粒子颜色使用深灰色或降饱和度的彩色透明度控制在0.4以下避免看久了眼睛疲劳。线条颜色通常比粒子颜色低调一些我用的是纯白或纯黑配透明度因为线条只是辅助结构不能跟粒子抢视觉重心。4.3 制作拖尾效果的一点心得彩点背景还有一个很受欢迎的高级玩法拖尾效果。实现原理非常巧妙不是每次用clearRect把画布完全清干净而是叠加一层半透明黑色蒙版让上一帧的图像以低透明度残留在画面中形成连续的轨迹。ctx.fillStyle rgba(0, 0, 0, 0.15); ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);这个写法在浅色背景下会留下灰黑色残影需要把填充色改成页面背景色。但拖尾效果对粒子速度的敏感度很高速度太快残影碎成一片速度太慢则看起来只是普通的模糊背景。我的建议是只在特殊活动页使用日常内容页还是保持清爽的完整帧清除。5. 性能优化与问题排查实录5.1 白屏问题检查这四处我在使用过程中被问得最多的问题是“为什么背景一片空白”。排除浏览器不支持Canvas这个少见情况外绝大部分原因是以下四个中的一个。第一Canvas初始化代码执行时页面还没加载完。解决办法是把脚本放到HTML底部或者监听window.onload后再执行初始化。第二dpr缩放之后忘记ctx.scale导致所有绘制内容跑到画布可视区域之外。第三粒子数量设置为0或全部分子的半径太小肉眼几乎看不见。第四画布被z-index和背景色盖住了检查一下外层容器的背景样式是否设置了不透明的背景色。5.2 性能卡顿从双重循环下手优化粒子连线效果的算法瓶颈很明确drawLines里的双重循环复杂度是O(n²)。粒子数从100涨到300连线计算量翻了9倍这是卡顿的主要来源。优化的一个有效方式是提前做粗粒度剪枝。把画布划分成若干网格每个粒子只跟同一网格和相邻网格里的粒子计算距离。这样虽然代码量增加了但时间复杂度从O(n²)降到接近O(n)粒子数即使到500也能流畅运行。下面是一个简化的实现思路。const gridSize 150; const grid {}; function addToGrid(p) { const gx Math.floor(p.x / gridSize); const gy Math.floor(p.y / gridSize); const key gx , gy; if (!grid[key]) grid[key] []; grid[key].push(p); } // 只遍历相邻网格内的粒子计算连线如果你的粒子数量稳定在100到200之间不写网格优化也能跑得很流畅但如果要做大屏项目这个优化就是必需品。5.3 鼠标交互发热问题与移动端降级鼠标连线效果的互动感非常好但在移动端这是一个灾难。手机浏览器对mousemove事件的模拟来自手指触摸只要手指停在屏幕上不动也会持续触发事件加上Canvas每帧都在重绘电量消耗非常快。我的方案是检测navigator.maxTouchPoints如果大于0就默认不启用鼠标连线逻辑只保留粒子自动运动和连线。if (navigator.maxTouchPoints 0) { // 桌面端启用鼠标交互 }另一个重要细节是尊重用户的系统偏好设置。通过prefers-reduced-motion媒体查询检测用户是否在系统中开启了“减少动态效果”选项如果开启了就把粒子数量减半、动画速度降到最低甚至直接输出一帧静态画面。这不是可选项而是作为网页开发者对用户可访问性的基本尊重。6. 项目打包与快速集成到现有页面6.1 避免全局污染用IIFE包起来我在多个项目里复用这个背景组件时踩过的最大坑是变量污染。一个页面里可能同时有多个第三方脚本如果粒子代码里的particles、mouse这些变量直接挂到全局就有可能在别人的代码里被意外覆盖。解决方式其实很简单把所有逻辑包进一个立即执行函数表达式IIFE里对外只暴露一个初始化方法。(function () { function Particle() { /* 粒子类 */ } function initParticleBg() { /* 初始化逻辑 */ } window.initParticleBg initParticleBg; })();这样既保留了外部可调用的入口又不污染全局命名空间接入任何现有项目都会很安全。6.2 按需加载不是所有页面都需要这个效果最后一个经验是不要盲目在全站启用彩点背景。背景动画占用GPU资源对于以阅读为主要目标的长文页面来说长时间盯着动态背景用户容易产生视觉疲劳。我在实际项目中通常只在三个位置启用首页首屏、产品介绍页、活动专题页。其余页面保持简洁的纯色背景。如果你要把它做成一个可配置的模块我建议把粒子数量、颜色主题、是否启用鼠标交互、是否启用拖尾效果这四个参数都抽成配置项这样不同页面可以直接复用同一套代码只需要在调用时传入不同的配置对象。代码维护成本会因此大幅降低这套效果才能从一个demo真正变成可以长期使用的项目资产。本文还有配套的精品资源点击获取 
