p5.js中createImg生成的图片出现在画布底部问题求助

我是p5.js新手，正在制作一款“找怪物”小游戏。使用createImg("insert_image.png")函数时，画布底部会自动生成完整尺寸的图片，请问该如何消除这个问题？

原代码 #

function setup() {
  createCanvas(600, 580);
  textSize(30);
  textAlign(CENTER, CENTER);
  textFont('georgia');
  imageMode(CENTER);
  backgroundCreatures = [];
  creature1 = createImg('monster1.png');
  creature2 = createImg('monster2.png');
  creature3 = createImg('monster3.png');
  creature4 = createImg('monster4.png');
  creature5 = createImg('monster5.png');
  creature6 = createImg('monster6.png');
  creatures = [creature1, creature2, creature3, creature4, creature5, creature6];
  setTimeout(() => display(), 2000);
  noLoop();
}

function draw() {
  if (creatures.length != 0) {
    munchEffect();
  } else {
    creaturesCheer();
  }
}

var munchCount = 0;
function munchEffect() {
  var munchMax = 30;
  if (munchCount >= munchMax) {
    munchCount = 0;
    noLoop();
    display();
  } else {
    noStroke();
    fill('#40E0D0');
    ellipse(random(600), random(580), random(50, 300));
  }
  munchCount++;
}

var cheeringCreatures = 0;
function creaturesCheer() {
  for (let i = 0; i < 2; i++) {
    image(random(backgroundCreatures), random(600), random(580), 30, 30);
  }
  cheeringCreatures = cheeringCreatures + 2;
  if (cheeringCreatures > 500) {
    noLoop();
  }
  noStroke();
  rectMode(CENTER);
  fill('#800080');
  rect(310, 300, 400, 300, 0);
  strokeWeight(2);
  stroke('#800080');
  fill('#FFD700');
  rect(300, 290, 400, 300, 0);
  textSize(60);
  displayText('You found\nthem all!', 300, 290, 3);
}

function displayText(message, x, y, size) {
  noStroke();
  fill('#800080');
  text(message, x + size, y + size);
  stroke('#800080');
  strokeWeight(2);
  fill('#FFFFFF');
  text(message, x, y);
}

function display() {
  background('#40E0D0');
  if (backgroundCreatures.length === 0) {
    backgroundCreatures.push(creatures.pop());
  }
  for (let i = 0; i < 10000; i++) {
    image(random(backgroundCreatures), random(300) + 150, random(290) + 145, 30, 30);
  }
  displayText(backgroundCreatures.length + '. Where is', 280, 72, 2);
  creature = new Creature(random(300) + 150, random(290) + 145, creatures.pop());
  creature.show();
  image(creature.image, 380, 72, 40, 40);
  backgroundCreatures.push(creature.image);
}

function mousePressed() {
  if (creature.clicked()) {
    loop();
  }
}

class Creature {
  constructor(x, y, image) {
    this.x = x;
    this.y = y;
    this.image = image;
  }
  show() {
    image(this.image, this.x, this.y, 30, 30);
  }
  clicked() {
    let distance = dist(this.x, this.y, mouseX, mouseY);
    if (distance < 15) {
      return true;
    }
  }
}

问题原因 #

createImg()是p5.js中创建DOM图像元素的函数，它会直接将图片添加到HTML页面的画布外部，因此你会在画布底部看到完整尺寸的图片。而如果要在p5.js画布内部绘制图片，应该使用loadImage()函数。

解决方法 #

1. 使用preload()函数提前加载所有图片（确保图片加载完成后再执行后续代码，避免图像未加载导致的错误）
2. 将所有createImg()替换为loadImage()，并在preload()中完成加载

修改后的完整代码 #

// 声明全局变量存储图片
let creature1, creature2, creature3, creature4, creature5, creature6;
let backgroundCreatures = [];
let creatures = [];
let creature;

function preload() {
  // 用loadImage加载图片，不会生成额外DOM元素
  creature1 = loadImage('monster1.png');
  creature2 = loadImage('monster2.png');
  creature3 = loadImage('monster3.png');
  creature4 = loadImage('monster4.png');
  creature5 = loadImage('monster5.png');
  creature6 = loadImage('monster6.png');
}

function setup() {
  createCanvas(600, 580);
  textSize(30);
  textAlign(CENTER, CENTER);
  textFont('georgia');
  imageMode(CENTER);
  
  creatures = [creature1, creature2, creature3, creature4, creature5, creature6];
  setTimeout(() => display(), 2000);
  noLoop();
}

function draw() {
  if (creatures.length != 0) {
    munchEffect();
  } else {
    creaturesCheer();
  }
}

var munchCount = 0;
function munchEffect() {
  var munchMax = 30;
  if (munchCount >= munchMax) {
    munchCount = 0;
    noLoop();
    display();
  } else {
    noStroke();
    fill('#40E0D0');
    ellipse(random(600), random(580), random(50, 300));
  }
  munchCount++;
}

var cheeringCreatures = 0;
function creaturesCheer() {
  for (let i = 0; i < 2; i++) {
    image(random(backgroundCreatures), random(600), random(580), 30, 30);
  }
  cheeringCreatures = cheeringCreatures + 2;
  if (cheeringCreatures > 500) {
    noLoop();
  }
  noStroke();
  rectMode(CENTER);
  fill('#800080');
  rect(310, 300, 400, 300, 0);
  strokeWeight(2);
  stroke('#800080');
  fill('#FFD700');
  rect(300, 290, 400, 300, 0);
  textSize(60);
  displayText('You found\nthem all!', 300, 290, 3);
}

function displayText(message, x, y, size) {
  noStroke();
  fill('#800080');
  text(message, x + size, y + size);
  stroke('#800080');
  strokeWeight(2);
  fill('#FFFFFF');
  text(message, x, y);
}

function display() {
  background('#40E0D0');
  if (backgroundCreatures.length === 0) {
    backgroundCreatures.push(creatures.pop());
  }
  for (let i = 0; i < 10000; i++) {
    image(random(backgroundCreatures), random(300) + 150, random(290) + 145, 30, 30);
  }
  displayText(backgroundCreatures.length + '. Where is', 280, 72, 2);
  creature = new Creature(random(300) + 150, random(290) + 145, creatures.pop());
  creature.show();
  image(creature.image, 380, 72, 40, 40);
  backgroundCreatures.push(creature.image);
}

function mousePressed() {
  if (creature.clicked()) {
    loop();
  }
}

class Creature {
  constructor(x, y, image) {
    this.x = x;
    this.y = y;
    this.image = image;
  }
  show() {
    image(this.image, this.x, this.y, 30, 30);
  }
  clicked() {
    let distance = dist(this.x, this.y, mouseX, mouseY);
    if (distance < 15) {
      return true;
    }
  }
}

额外说明 #

• preload()是p5.js的特殊函数，会在setup()之前执行，专门用于加载外部资源（图片、音频等），确保资源加载完成后再运行主逻辑。
• loadImage()返回的是p5.js的图像对象，只能通过image()函数在画布内绘制，不会在页面上生成额外的DOM元素，完美解决你遇到的问题。

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