jQuery动态添加div后p5.js无法正常渲染的问题求助

看起来你遇到的核心问题是代码执行顺序不匹配，加上p5.js代码里的小错误，导致动态添加容器后动画无法正常渲染。我来一步步帮你拆解：

错误原因 #

1. 异步加载的顺序问题
   你用$("#contentbox3").load("graphic2.html")加载容器div，同时用$.getScript("animatebug.js")加载p5脚本，但这两个操作是异步并行的。很可能p5的setup()函数执行时，#p5canvas还没被插入到DOM里，导致myCanvas.parent('p5canvas')找不到目标元素，canvas就默认挂载到了body或者根本没正确渲染。

2. p5.js代码的重复调用
   在setup()里你连续调用了两次createCanvas(400, 400)，这会创建两个canvas元素，第二次的操作会覆盖第一次的，也可能导致渲染异常。

修复步骤 #

第一步：调整脚本加载的时机 #

把$.getScript放到load方法的回调函数里，确保容器div加载完成后再初始化p5动画：

$("#btn3").click(function(){
  $("#contentbox3").load("graphic2.html", function() {
    // 回调函数会在load完成后执行
    $.getScript("animatebug.js");
  });
});

第二步：修正animatebug.js的代码 #

去掉重复的createCanvas调用，并且确保图片加载的逻辑更稳妥（避免图片未加载完成就渲染）：

let img; // 声明全局变量

function setup(){
  const myCanvas = createCanvas(400, 400);
  myCanvas.parent('p5canvas');
  background(200,100,0);
  // 用回调确保图片加载完成后再处理
  img = loadImage("images/bug_small.gif", function() {
    image(img, 0, 0);
  });
}

function draw(){
  background(200,100,0);
  if(img) { // 先判断图片是否加载完成
    image(img, 100, 100);
  }
}

额外注意点 #

• 如果你多次点击按钮，会重复加载animatebug.js，导致p5的setup和draw被重复注册，可能引发混乱。可以加个判断，比如检查#p5canvas里是否已经有canvas元素，避免重复加载脚本。
• 确保images/bug_small.gif的路径是正确的，相对于当前页面（main.php）的路径，不是相对于animatebug.js的路径。

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