当使用 p5.js 实例模式（instance mode）为多个 canvas 分配不同 id 时，若混淆了全局 p5 函数调用与自定义变量/函数的作用域，会导致脚本报错、页面白屏——核心在于严格区分 `f.` 前缀的使用边界。
在 p5.js 的实例模式中，所有原生 p5 API（如 createCanvas、background、mouseX、color、sqrt 等）必须通过参数 f 显式调用（即 f.background()），而你自行声明的变量、函数和类（如 particles2、handleFooterInteractions、Particle2）属于闭包内部作用域，不应加 f. 前缀。原始代码中大量错误地在 particles2[i]、f.particles2.length、f.handleFooterInteractions() 等位置滥用 f.，导致 JavaScript 尝试从 f 对象上读取未定义属性，最终引发运行时错误（如 Cannot read property 'length' of undefined），进而使整个页面崩溃白屏。
此外，还需注意以下关键点：
✅ 正确的作用域划分原则：
- ✅ f.xxx：仅用于调用 p5 内置方法/属性（f.width, f.mouseX, f.ellipse()）
- ✅ particles2, viscosity2, handleFooterInteractions, Particle2：全部是闭包内声明的自有变量/函数，直接使用，绝不加 f.
- ❌ f.particles2、f.handleFooterInteractions：错误！particles2 并非挂载在 f 上，而是局部数组；该写法会返回 undefined，后续 .length 或调用将抛出异常。
✅ HTML 容器需提前存在：
确保目标容器（如 <div id="footer"></div>）在执行 new p5(s1, 'footer') 前已存在于 DOM 中。若脚本置于 <head> 中且未加 defer 或 DOM 加载监听，可能因元素未就绪导致初始化失败。推荐将 script 标签放在 </body> 前，或使用：
<script>
document.addEventListener('DOMContentLoaded', () => {
var myp5 = new p5(s1, 'footer');
});
</script>✅ 完整修复后的工作示例（精简版）：
var s1 = function(f) {
let particles2 = []; // 使用 let/const 更安全
let viscosity2;
let c2;
f.setup = function() {
f.createCanvas(f.windowWidth, f.windowHeight);
f.frameRate(60);
f.noStroke();
c2 = f.color(13, 104, 167);
viscosity2 = 0.8;
for (let i = 0; i < 900; i++) {
particles2.push(new Particle2(
f.random(f.width / 8, f.width / 4),
f.random(f.height - f.height / 18, f.height + f.height / 15),
c2
));
}
};
f.draw = function() {
f.background(0);
handleFooterInteractions(); // ← 无 f.
for (let i = 0; i < particles2.length; i++) { // ← 无 f.
particles2[i].move();
particles2[i].display();
}
};
// 自定义类：不加 f.，直接定义
Particle2 = function(x, y, c) {
this.xPos = x;
this.yPos = y;
this.xVel = 0;
this.yVel = 0;
this.mass = f.random(0.005, 0.02);
this.colour = c;
this.move = function() {
this.xPos += this.xVel;
this.yPos += this.yVel;
};
this.display = function() {
f.fill(this.colour); // ← 仅此处用 f.（p5 API）
f.ellipse(this.xPos, this.yPos, this.mass * 1000, this.mass * 1000);
};
};
// 自定义函数：不加 f.
handleFooterInteractions = function() {
for (let i = 0; i < particles2.length; i++) {
let accX = 0, accY = 0;
// 粒子间作用力（使用 particles2[i]，非 f.particles2[i]）
for (let j = 0; j < particles2.length; j++) {
if (i !== j) {
const dx = particles2[j].xPos - particles2[i].xPos;
const dy = particles2[j].yPos - particles2[i].yPos;
const dis = f.sqrt(dx * dx + dy * dy) || 1;
const force = (dis - 600) * particles2[j].mass / dis;
accX += force * dx;
accY += force * dy;
}
}
// 鼠标交互（使用 f.mouseX/f.mouseY，因为是 p5 属性）
const mx = f.mouseX - particles2[i].xPos;
const my = f.mouseY - particles2[i].yPos;
const mdis = f.sqrt(mx * mx + my * my) || 40;
const mforce = (mdis - 50) / (5 * mdis);
accX += mforce * mx;
accY += mforce * my;
particles2[i].xVel = particles2[i].xVel * viscosity2 + accX * particles2[i].mass;
particles2[i].yVel = particles2[i].yVel * viscosity2 + accY * particles2[i].mass;
}
};
};
// 启动实例：指定容器 ID（确保 HTML 中有 <div id="footer"></div>）
new p5(s1, 'footer');? 总结提醒：
- 白屏 ≠ 语法错误，很可能是运行时 ReferenceError 或 TypeError 导致脚本中断；务必打开浏览器开发者工具（F12 → Console）查看具体报错信息；
- 多实例共存时，每个 sN = function(f){...} 必须相互隔离，避免变量名冲突；
- 若需共享数据（如全局配置），应显式通过参数传入或使用模块化封装，切勿依赖隐式全局变量；
- p5.js 官方文档明确指出：“In instance mode, only the p5 methods and properties are available on the f object — your own variables live in the closure.”（p5.js Instance Mode Docs）
遵循上述规则，即可稳定嵌入多个 p5.js 实例，彻底规避“页面变白”问题。
