如何将p5.js实现的粒子星空效果设为HTML页面真实背景

问题原因 #

你之前用parent()挂载画布后无法作为底层背景，核心原因是p5.js默认生成的canvas元素是普通文档流内元素，会占用正常排版位置，既会被其他页面元素挤动，也无法固定铺满整个视口作为底层。

核心实现思路 #

要让粒子效果成为真正的页面背景，只需要让画布脱离标准文档流，固定在视口区域铺满全屏，层级放到所有页面内容的最下方，不影响正常内容的排版和交互。

具体操作步骤 #

• 画布直接挂载到body节点下，不要嵌入到普通内容容器里，避免父元素的overflow、transform等属性干扰画布显示
• 给canvas元素设置固定定位，对齐视口左上角，宽高绑定视口尺寸，z-index设置为-1放到最底层
• 页面所有内容的外层容器设置相对定位，z-index设为大于-1的值，保证内容显示在画布上层，交互正常
• 增加窗口尺寸监听，视口变化时自动调整画布大小，避免缩放出现白边

完整可运行代码 #

p5.js逻辑部分 #

const num = 200; // 可自行调整粒子密度
const particles = [];

function setup() {
  // 创建和视口等尺寸的画布
  const bgCanvas = createCanvas(windowWidth, windowHeight);
  // 挂载到body节点
  bgCanvas.parent(document.body);
  // 设置画布样式实现固定背景效果
  const canvasEl = bgCanvas.elt;
  canvasEl.style.position = 'fixed';
  canvasEl.style.top = '0';
  canvasEl.style.left = '0';
  canvasEl.style.width = '100vw';
  canvasEl.style.height = '100vh';
  canvasEl.style.zIndex = '-1';
  canvasEl.style.pointerEvents = 'none'; // 禁止画布拦截鼠标事件，避免影响页面交互

  // 原有粒子初始化逻辑
  for (let i = 0; i < num; i++) {
    particles.push(createVector(random(width), random(height)));
  }
  stroke(82, 48, 192);
}

function draw() {
  background(0, 10);
  for (let i = 0; i < num; i++) {
    const p = particles[i];
    point(p.x, p.y);
    // 可自行扩展粒子移动、连线等效果
  }
}

// 窗口大小变化时自适应画布尺寸
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

配套全局CSS #

/* 清除浏览器默认边距，避免出现多余滚动条 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 页面内容外层容器，保证内容在画布上层 */
.app-container {
  position: relative;
  z-index: 1;
  /* 其余业务样式按需编写即可 */
}

注意事项 #

• z-index属性仅对position值不为static的元素生效，如果发现内容被画布遮挡，先检查内容容器有没有设置定位属性
• 给canvas加上pointer-events: none可以彻底避免画布拦截点击、hover等鼠标事件，不需要担心背景影响页面交互
• 不要在挂载画布的父节点（body）上设置transform属性，会导致fixed定位相对父元素而非视口，出现显示异常

内容的提问来源于stack exchange，提问作者Wouter