p5.js加载图片作为HTML5 Canvas背景出现白屏问题求助

安全阿岳

2026-5-14

解决HTML5 Canvas（p5.js）加载图片作为背景白屏的问题

嘿，我一眼就看出问题出在哪啦！你用的是p5.js对吧？loadImage()是异步操作——也就是说它不会立刻把图片加载好就往下走，当你的draw()函数第一次执行background(bg)的时候，bg还没完成加载，还是个undefined，所以屏幕就显示白屏了。

给你两种靠谱的解决方案：

方案1：使用`preload()`函数（最推荐）

p5.js专门提供了preload()函数，它会在setup()之前执行，并且会等所有加载的资源都就绪后才继续运行后续代码，完美解决异步问题：

let bg;

function preload() {
  // 在这里加载图片，确保setup执行前图片已经加载完成
  bg = loadImage("https://mcdn.wallpapersafari.com/medium/1/92/T1iecJ.jpg");
}

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(bg);
}

方案2：使用`loadImage()`的回调函数

如果你不想用preload，也可以给loadImage传一个回调函数，当图片加载完成后再进行绘制：

let bg;
let isImageLoaded = false;

function setup() {
  createCanvas(600, 400);
  // 第三个参数是加载完成的回调
  bg = loadImage("https://mcdn.wallpapersafari.com/medium/1/92/T1iecJ.jpg", () => {
    isImageLoaded = true;
  });
}

function draw() {
  // 只有图片加载完成后才绘制背景
  if (isImageLoaded) {
    background(bg);
  } else {
    // 可以加个加载提示，比如显示灰色背景
    background(200);
  }
}

另外还要注意几个小细节：