p5.js入门：如何点击按钮循环切换数组内图片并隐藏其他非选中项

原有代码误区说明 #

p5.js中image()是直接将像素绘制到canvas画布上，生成的是静态位图内容，不属于可操作的DOM元素，没有.hide()方法，因此你之前写的隐藏逻辑无法生效。

两个需求的实现逻辑 #

• 每次点击仅展示一款蛋糕：不需要单独处理其余蛋糕的隐藏，每次点击切换时，先重新绘制贺卡底图覆盖掉之前绘制的所有内容，再绘制当前选中的蛋糕即可。
• 遍历完自动循环回到第一款：使用取模运算符%，将点击计数对蛋糕总数量取余，就能自动实现循环效果，无需额外写判断逻辑。

修改后的完整代码 #

let clickCount = 0
let cakes
let cakeButton
let card_bg

function preload (){
  card_bg = loadImage("card_bg.png")
  // 加载所有蛋糕资源
  cake_chocolate = loadImage("cake_chocolate.png")
  cake_pink = loadImage("cake_pink.png")
  cake_pinkDrip = loadImage("cake_pinkDrip.png")
  cake_rainbow = loadImage("cake_rainbow.png")
  cake_white = loadImage("cake_white.png")
  // 帽子、表情资源你后续开发可以继续加
  hat_chevron = loadImage("hat_chevron.png")
  hat_dots = loadImage("hat_dots.png")
  hat_puff = loadImage("hat_puff.png")
  hat_stars = loadImage("hat_stars.png")
  hat_stripes = loadImage("hat_stripes.png")
}

function setup() {
  createCanvas(450, 600);
  background(220);
  // 初始化蛋糕数组
  cakes = [cake_chocolate, cake_pink, cake_pinkDrip, cake_white, cake_rainbow]
  // 绘制初始底图
  image(card_bg, 0, 0)
  cakeButton = createButton("click me", "blue")
  cakeButton.position(125, 600)
  cakeButton.size(200, 150)
  cakeButton.mousePressed(cakePress)  
}

function cakePress() {
  clickCount++
  // 先重绘底图，覆盖之前画的蛋糕
  image(card_bg, 0, 0)
  imageMode(CENTER)
  // 计算当前选中的蛋糕索引，% 运算符自动实现循环
  // 第1次点击索引为0（对应第一款），第5次索引为4（对应第五款），第6次索引回到0
  const currentCakeIndex = (clickCount - 1) % cakes.length
  // 直接绘制当前选中的蛋糕即可
  image(cakes[currentCakeIndex], 225, 425)
}

后续扩展建议 #

后续你要加帽子、表情切换功能时，逻辑完全一致：给每个板块单独设置点击计数、资源数组，每次切换某个板块时，重绘底图后，把已经选中的其他板块内容也重新绘制一遍即可。

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