运行p5.js代码时屏幕持续空白的原因咨询

嘿，第一次尝试p5.js就碰到空白屏幕确实挺让人沮丧的，我来帮你梳理几个最可能的问题点，你可以逐一排查：

• p5.js库未正确引入
  这是新手最常踩的坑。如果你的HTML文件里没有正确引入p5.js库，所有代码都是“无本之木”，自然没法运行。要确保在<head>标签里添加了库的引用：

  <script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
  

  如果你用的是本地下载的p5.js文件，要确认文件路径和HTML文件匹配，比如文件放在同一文件夹下就用src="p5.js"，路径错了浏览器找不到库，直接就会空白。

• 未遵循p5.js的核心函数结构
  p5.js依赖setup()和draw()这两个核心函数来管理代码执行逻辑：

  • setup()只运行一次，用来初始化画布、设置参数；
  • draw()会持续循环运行，用来绘制内容。
    如果你直接写text("hello new world", 100, 100)而不把它放进这两个函数里，p5.js根本不知道什么时候执行这段代码。正确的基础结构应该是这样：

  function setup() {
    createCanvas(400, 400); // 必须创建画布，这是内容的载体
  }
  
  function draw() {
    background(220); // 可选，但能避免画面残留，让内容更清晰
    text("hello new world", 50, 50);
  }
  

  另外，一定要调用createCanvas()——如果没创建画布，p5.js没有绘制的载体，屏幕当然是空白的。

• 内容超出画布范围或画布尺寸异常
  比如你创建了400x400的画布，但把文字放在了text("hello", 500, 500)这个位置，文字直接超出了画布边界，看起来就是空白；或者不小心把画布尺寸设成了createCanvas(0, 0)，这种情况也会完全看不到内容。

• 代码存在语法错误或控制台报错
  按下F12打开浏览器的开发者工具，切换到「Console」标签页，看看有没有红色的错误提示。比如拼写错了函数名（把createCanvas写成createCanvans）、变量未定义，或者库引用时的网络错误，这些都会导致代码中断，进而出现空白屏幕。

• HTML结构异常
  p5.js默认会把生成的画布添加到HTML的<body>元素中，如果你的HTML文件里没有<body>标签，或者<script>标签放在了错误的位置（比如<html>标签外面），也可能导致画布无法正常渲染。

你可以先从检查库引用和核心函数结构开始，再打开控制台看看有没有报错，应该能很快定位到问题~

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