HTML中添加多p5.js画布遇“p is not defined”错误求解决

核心原因分析 #

“p is not defined”基本是两个原因：要么你在实例回调函数外面瞎用了p变量，要么实例初始化的写法错了，导致p5实例没绑定到变量上。

标准多画布实例模式写法（对照排查） #

先给你一个能跑通的框架，对比你自己的代码找问题：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
</head>
<body>
  <div id="canvas1"></div>
  <div id="canvas2"></div>

  <script>
    // 第一个画布实例
    let sketch1 = function(p) {
      let img;
      p.preload = function() {
        img = p.loadImage('你的图片路径1.jpg');
      };
      p.setup = function() {
        p.createCanvas(400, 400).parent('canvas1');
      };
      p.draw = function() {
        p.background(220);
        p.image(img, 0, 0);
      };
    };
    new p5(sketch1);

    // 第二个画布实例
    let sketch2 = function(p) {
      let img;
      p.preload = function() {
        img = p.loadImage('你的图片路径2.jpg');
      };
      p.setup = function() {
        p.createCanvas(400, 400).parent('canvas2');
      };
      p.draw = function() {
        p.background(150);
        p.image(img, 50, 50);
      };
    };
    new p5(sketch2);
  </script>
</body>
</html>

常见错误排查点 #

• 别在sketch函数外面用p
  所有p5的API调用（比如p.loadImage、p.createCanvas）必须放在p.preload、p.setup、p.draw这些属于当前实例的方法里，外面根本识别不到这个p变量。
• 实例初始化别漏传sketch函数
  要是写成new p5()而没把你写的sketch函数传进去，或者sketch函数的参数不是p，实例根本建不起来，自然会报错p未定义。
• 避免全局变量重名
  如果你全局定义了一个也叫p的变量，会和实例的参数名冲突，老老实实保持sketch函数的参数名用p，别瞎改。
• 图片路径错了也可能间接报错
  图片加载失败时，后续用img的代码出错，有时候会被误以为是p的问题。可以在preload里加个回调确认：p.loadImage('路径', ()=>console.log('加载成了'), ()=>console.log('加载炸了'))

快速调试技巧 #

1. 按F12开浏览器控制台，看报错的具体行号，找到用p的地方，确认是不是在sketch函数内部。
2. 在sketch的setup开头加console.log(p)，能打印出p5实例对象说明初始化没问题，问题在后面代码；打印undefined就去检查new p5(sketch)这行写没写错。

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