为何p5.js中的fill()函数会影响所有自定义函数？

嘿，这个问题其实是p5.js绘图机制的一个常见特性——它的绘图状态是全局共享的！像fill()、stroke()、translate()、rotate()这类设置，一旦调用就会改变全局的绘图上下文状态，之后所有的绘图操作，不管是在draw()里还是你自己写的自定义函数里，都会沿用这个状态，除非你手动去重置或者保存/恢复状态。

先看你的代码问题 #

你的draw()函数里调用了fill(100,100,10)，这个填充色设置会一直生效，直到你调用其他fill()或者noFill()。另外我注意到你draw()最后一行的(20,20);应该是打错了，应该是rotateAbout(20,20);吧？不然这个自定义函数根本没被执行～如果调用了的话，函数里画的椭圆自然会用上之前设置的这个土黄色填充。

怎么解决这个问题？ #

如果你想让自定义函数不受全局fill设置的影响，有两种常用方式：

• 手动设置专属填充色：在自定义函数开头直接设置你需要的fill()，比如fill(255,0,0)给个红色，这样函数里的绘图就会用这个颜色，不会受外部影响。
• 用push()和pop()隔离状态：这是p5.js里管理绘图状态最优雅的方式，push()会把当前所有绘图状态（包括fill、translate、rotate这些）都保存起来，pop()则会恢复到保存前的状态。这样自定义函数里的任何状态修改都不会影响外部，反过来也一样。

给你改个示例代码看看：

let a1 = a2 = 0;
function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(200);
  fill(100,100,10); // 设置全局填充色为土黄
  translate(width/2,height/2);
  angleMode(DEGREES);
  rotate(a1);
  ellipse(20,20,50,50); // 这个椭圆用土黄填充
  a1+=1;
  
  // 用push/pop隔离自定义函数的状态
  push();
  rotateAbout(20,20);
  pop();
}
function rotateAbout(x,y){
  fill(255,0,0); // 自定义函数里设置红色填充
  translate(x,y);
  rotate(a2);
  ellipse(15,15,20,20); // 这个椭圆用红色填充
  a2+=1;
}

简单说就是：p5.js所有绘图操作共享同一个状态栈，fill()这类设置会一直生效到你主动修改它，所以才会影响所有后续的绘图函数～

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