数据大屏粒子背景需绑定容器尺寸、禁用滚动与鼠标交互、适配高分屏且透明不遮挡；canvas宽高须基于容器rect和devicepixelratio动态设置，tsparticles须关闭autosize和fullscreen并禁用hover/click。
数据大屏的粒子背景不能直接套用全屏或 hero 区域方案——它必须稳定贴合固定尺寸容器、禁用滚动干扰、适配高分屏且不抢数据焦点。核心判断：粒子只是视觉基底，不是动效主体；一旦飘出容器边界、随滚动位移、或遮挡图表文字，就属于失败实现。
canvas 宽高必须绑定大屏容器，而非 window
数据大屏通常嵌在固定宽高的 DOM 容器里（如 div#dashboard），若仍用 window.innerWidth 初始化 canvas，会导致：
- 粒子在缩放/全屏切换后严重拉伸或留白
- 容器内有滚动条时，canvas 不随内容滚动，粒子“钉死”在视口位置，与下方图表错位
- 多屏拼接场景下，每个屏幕 canvas 尺寸不一致，粒子密度失衡
正确做法是监听容器尺寸变化，而非窗口：
const dashboard = document.querySelector('#dashboard');
const canvas = dashboard.querySelector('canvas');
const ctx = canvas.getContext('2d');
<p>function resize() {
const rect = dashboard.getBoundingClientRect();
canvas.width = rect.width <em> window.devicePixelRatio;
canvas.height = rect.height </em> window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}</p><p>resize();
// 用 ResizeObserver 替代 window.resize —— 更精准、不抖动
new ResizeObserver(resize).observe(dashboard);
</p>
tsparticles 配置必须关闭 autoSize 并指定 target
默认 tsparticles 会接管 body 或全屏，这在大屏中必然导致粒子溢出容器、z-index 错乱、甚至覆盖 ECharts 图表图例。关键配置只有两个：
-
autoSize: false—— 强制禁用自动适配逻辑 -
fullScreen: { enable: false }和detectRetina: true—— 防止 DPR 判定错误
完整初始化示例：
tsParticles.load('particles-js', {
fullScreen: { enable: false },
autoSize: false,
detectRetina: true,
particles: {
number: { value: 80 }, // 大屏建议 ≤120，避免 GPU 过载
color: { value: '#4a90e2' },
opacity: { value: 0.6 } // 透明度 ≥0.5，确保底层图表可读
},
interactivity: { events: { onhover: { enable: false } } }, // 关闭 hover，防误触
background: { color: 'transparent' } // 背景必须透明，否则盖住大屏底色
});
粒子运动必须禁用鼠标交互与连线
大屏常运行在触控一体机或远程投屏环境，mousemove 事件不可靠，且鼠标跟随/连线会引发三类问题：
- 连线算法消耗 CPU，在低配工控机上帧率骤降至 20fps 以下
- 鼠标悬停触发粒子加速，但大屏无鼠标，效果失效还空耗计算
- 连线遮挡折线图趋势线、柱状图数值标签等关键信息
只需两处关闭：
- Canvas 自定义方案：删掉所有
addEventListener('mousemove', ...)和粒子间距离循环 - tsparticles 方案：设
interactivity: { events: { onhover: { enable: false }, onclick: { enable: false } } }
运动逻辑应极简：匀速漂移 + 边界反弹，或轻微正弦偏移（y += Math.sin(x * 0.01) * 0.3），避免复杂力场计算。
性能卡顿优先查 devicePixelRatio 与重绘频率
大屏常见卡顿根源不是粒子数量，而是：
- canvas 未乘
window.devicePixelRatio，浏览器强制缩放渲染，GPU 合成压力翻倍 - 每帧都调用
getBoundingClientRect()（尤其在requestAnimationFrame内） - 用
clearRect(0, 0, canvas.width, canvas.height)清屏，但 width/height 是逻辑像素，实际绘制区域远大于此，造成大量无效填充
修复方式：
- canvas.width/height 设为
rect.width * dpr，再用ctx.scale(dpr, dpr)统一坐标系 - 把
getBoundingClientRect()结果缓存为变量，resize 时才更新 - 清屏改用
ctx.clearRect(0, 0, rect.width, rect.height)，不带 dpr 缩放
最后注意：大屏粒子动画在 Chrome DevTools 的 Rendering 面板开启 “FPS Meter” 和 “Paint Flashing”，一眼就能看出是否在无效区域反复重绘——这是最被忽略也最致命的性能盲点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
