P5.js画布无报错无法显示、官方编辑器可运行该如何解决？

问题根源 #

当<script>标签设置了src属性用于加载外部JS文件时，标签内部嵌套的JS代码会被浏览器直接忽略，你写的setup、draw函数完全没有被执行，所以既不会生成画布，也不会触发报错。

修复方案 #

拆分两个独立的<script>标签：

• 第一个标签仅用于引入p5.js库，不要写任何内部代码
• 第二个标签单独写你的手绘逻辑代码

正确代码示例：

<!-- 第一个script仅引入p5.js库 -->
<script src="lib/p5.js"></script>
<!-- 第二个script写手绘逻辑 -->
<script>
function setup() {
  createCanvas(400, 400);
  background(255, 255, 255);
  noStroke();
}

function draw() {
  if(mouseIsPressed){
    fill(mouseY, mouseX, 0);
    ellipse(mouseX, mouseY, 10, 10);
  }
}
</script>

如果修改后仍不生效，可打开浏览器开发者工具的「网络」面板，检查lib/p5.js的请求状态是否为200，确认本地p5.js文件路径正确、文件本身没有损坏。

内容的提问来源于stack exchange，提问作者Mail-Main