点击按钮动态加载p5.js草图至DOM的问题排查

1. 页面加载时与事件回调中添加脚本的本质差异 #

• 页面加载阶段（比如DOMContentLoaded前或同步脚本执行时）添加p5.js草图脚本，此时p5.js的自动初始化逻辑还未触发：p5.js加载完成后会自动扫描全局作用域中的setup()、draw()等函数，自动创建p5实例并渲染画布。
• 事件回调中添加脚本时，p5.js早已完成初始化流程，不会再主动扫描新加入的全局函数；同时动态插入的脚本执行时，p5的自动启动机制已经结束，所以草图不会触发渲染。

2. 让动态插入的p5.js草图正常运行的方案 #

推荐使用p5.js的实例模式（而非全局模式），手动控制p5实例的创建与挂载，这是最可靠的解决方式。具体实现如下：

方案一：用实例模式编写草图（推荐） #

将草图逻辑封装成函数，在按钮点击时手动创建p5实例并挂载到目标容器#demo：

<!-- 页面结构 -->
<button id="loadSketchBtn">加载草图</button>
<div id="demo"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>

<script>
// 定义草图逻辑（实例模式）
function sketchTemplate(p) {
  p.setup = function() {
    p.createCanvas(400, 400);
  };

  p.draw = function() {
    p.background(220);
    p.circle(p.mouseX, p.mouseY, 50);
  };
}

// 按钮点击事件处理
document.getElementById('loadSketchBtn').addEventListener('click', function() {
  // 清除容器内旧内容，避免重复渲染
  const demoContainer = document.getElementById('demo');
  demoContainer.innerHTML = '';
  
  // 创建p5实例并挂载到目标容器
  new p5(sketchTemplate, demoContainer);
});
</script>

方案二：动态加载外部全局模式草图脚本 #

如果你的草图是单独的全局模式脚本文件，可以通过fetch获取脚本内容，转换为实例模式后执行：

<button id="loadExternalSketch">加载外部草图</button>
<div id="demo"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>

<script>
document.getElementById('loadExternalSketch').addEventListener('click', async function() {
  const demoContainer = document.getElementById('demo');
  demoContainer.innerHTML = '';

  // 加载外部草图脚本内容
  const response = await fetch('your-sketch-file.js');
  const sketchCode = await response.text();

  // 将全局模式代码转换为实例模式
  const sketchFn = new Function('p', sketchCode.replace(/setup/g, 'p.setup').replace(/draw/g, 'p.draw'));
  
  // 创建实例并挂载
  new p5(sketchFn, demoContainer);
});
</script>

关键注意事项 #

• 每次加载新草图前，务必清除目标容器内的旧内容，若需要可以调用旧实例的remove()方法销毁，避免内存泄漏。
• 实例模式下，所有p5 API都需通过实例对象（比如示例中的p）调用，既避免全局作用域冲突，也更适合多版本草图切换的场景。

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