如何在p5.js中实现按键后图片持续显示在屏幕上？

你当前的问题核心在于绘制时机错误：p5.js的draw()函数是持续循环执行的（默认每秒60次），每次循环都会调用background(0)清空整个画布。而你在keyPressed()里调用image()，只会在按键触发的那一瞬间画一次，下一次draw()清屏后，图片就消失了。

要实现图片持续显示、切换箭头键替换图片组的需求，只需用状态变量记录当前要显示的内容，把绘制逻辑移到draw()中，让每次屏幕刷新都自动重绘对应内容。

以下是修改后的完整代码：

// 预加载资源
function preload() {
  img1 = loadImage("img/Q.png");
  img2 = loadImage("img/W.png");
  img3 = loadImage("img/E.png");
  img4 = loadImage("img/R.png");
  img5 = loadImage("img/T.png");
  img6 = loadImage("img/Y.png");
  song1 = loadSound("audio/1.wav");
  song2 = loadSound("audio/2.wav");
  song3 = loadSound("audio/3.wav");
  song4 = loadSound("audio/4.wav");
  song5 = loadSound("audio/5.wav");
  song6 = loadSound("audio/6.wav");
}

// 状态变量：记录当前显示的箭头键图片组（初始为null，不显示任何组）
let currentArrowGroup = null;
// 状态变量：记录被按下的字母对应的图片显示状态
let selectedLetterImages = {
  q: false,
  w: false,
  e: false,
  r: false,
  t: false,
  y: false
};

function setup() {
  createCanvas(1024, 764);
}

function draw() {
  background(0); // 每次循环清屏

  // 根据当前箭头组状态绘制对应图片
  if (currentArrowGroup === "up") {
    // 上箭头对应的底部图片组
    image(img1, 20, 650, 100, 100);
    image(img2, 200, 650, 100, 100);
    image(img3, 380, 650, 100, 100);
    image(img4, 560, 650, 100, 100);
    image(img5, 740, 650, 100, 100);
    image(img6, 910, 650, 100, 100);
  } else if (currentArrowGroup === "left") {
    // 左箭头对应的自定义图片组（示例，可自行修改位置和图片）
    image(img1, 20, 300, 100, 100);
    image(img2, 200, 300, 100, 100);
    // 按需添加其他图片
  } else if (currentArrowGroup === "number2") {
    // 按数字2时单独显示的图片
    image(img1, 20, 650, 100, 100);
  }
  // 可继续添加右、下箭头的图片组分支

  // 绘制被选中的字母图片
  if (selectedLetterImages.q) image(img1, 20, 550, 100, 100);
  if (selectedLetterImages.w) image(img2, 200, 550, 100, 100);
  if (selectedLetterImages.e) image(img3, 380, 550, 100, 100);
  if (selectedLetterImages.r) image(img4, 560, 550, 100, 100);
  if (selectedLetterImages.t) image(img5, 740, 550, 100, 100);
  if (selectedLetterImages.y) image(img6, 910, 550, 100, 100);
}

function keyPressed() {
  // 处理箭头键：更新当前显示的图片组
  if (keyCode === UP_ARROW) {
    currentArrowGroup = "up";
  } else if (keyCode === LEFT_ARROW) {
    currentArrowGroup = "left";
  } else if (keyCode === RIGHT_ARROW) {
    currentArrowGroup = "right"; // 示例：右箭头组
  } else if (keyCode === DOWN_ARROW) {
    currentArrowGroup = "down"; // 示例：下箭头组
  }

  // 处理字母键：切换对应图片的显示状态
  const lowerKey = key.toLowerCase();
  if (selectedLetterImages.hasOwnProperty(lowerKey)) {
    selectedLetterImages[lowerKey] = !selectedLetterImages[lowerKey];
    // 可在此添加对应音效播放逻辑，比如：
    // if (lowerKey === 'q') song1.play();
  }

  // 处理数字2的触发逻辑
  if (key === '2') {
    currentArrowGroup = "number2";
  }
}

// 可选：按ESC键清空所有显示
// if (keyCode === ESCAPE) {
//   currentArrowGroup = null;
//   Object.keys(selectedLetterImages).forEach(key => selectedLetterImages[key] = false);
// }

关键修改说明 #

1. 状态变量驱动绘制：用currentArrowGroup记录当前要显示的箭头键图片组，切换箭头键时更新这个变量，draw()会自动绘制对应内容，旧组会被清屏后替换。
2. 字母键状态管理：用selectedLetterImages对象存储每个字母的显示状态，按下字母键时切换真假值，实现图片的显示/隐藏切换。
3. 绘制逻辑统一移到draw()：所有image()调用都放在draw()中，保证每次屏幕刷新时都会重新绘制，不会被清屏后消失。

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