p5.js技术问题：调用函数后如何移除画布上的按钮？

核心问题出在变量作用域和移除时机上：

• playButton是setup()内的局部变量，drawInstructions()无法访问它，直接在后者里调用移除会报错
• 在setup()里直接加移除代码，会导致按钮还没被点击就提前消失

修复方案 #

把playButton声明为全局变量，让drawInstructions()能访问到它，然后在进入说明界面时移除按钮：

let title, optimaFont;
let playButton; // 全局声明按钮变量

function preload() {
  title = loadImage("title.png");
  optimaFont = loadFont("Optima-ExtraBlack.otf");
}

function setup() {
  createCanvas(512, 384);
  background(title);

  let red1 = color(237, 39, 36);
  playButton = createButton("PLAY"); // 给全局变量赋值
  playButton.mousePressed(drawInstructions);
  playButton.position(212, 299);
  playButton.style("font-family", "Optima bold");
  playButton.style("font-size", "30px");
  playButton.style("background-color", red1);
}

function drawInstructions() {
  playButton.remove(); // 移除按钮
  background(0);
  // 这里可以添加你的说明文本绘制代码
}

另一种更简洁的写法 #

如果不想用全局变量，可以直接在mousePressed的回调里用箭头函数处理移除逻辑：

function setup() {
  createCanvas(512, 384);
  background(title);

  let red1 = color(237, 39, 36);
  let playButton = createButton("PLAY");
  // 用箭头函数包裹，直接在点击时移除按钮并调用说明函数
  playButton.mousePressed(() => {
    playButton.remove();
    drawInstructions();
  });
  playButton.position(212, 299);
  playButton.style("font-family", "Optima bold");
  playButton.style("font-size", "30px");
  playButton.style("background-color", red1);
}

两种写法都能实现点击按钮后，按钮消失并进入说明界面的效果。

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