为什么fill()影响p5.js中的所有功能?

时间:2019-03-09 13:34:08

标签: processing p5.js

每当我在p5.js中使用fill()时,我所有的用户定义函数都会受到它的影响。为什么?

这是我的代码:

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;
  (20,20);
}

function rotateAbout(x,y){
  translate(x,y);
  angleMode(DEGREES);
  rotate(a2);
  ellipse(15,15,20,20);
  a2+=1;
}

1 个答案:

答案 0 :(得分:4)

函数fill()不填充任何内容。它设置用于填充形状的颜色。此颜色是全局状态。
在处理中,形状将由当前的填充颜色填充。这将导致在调用fill之后绘制的所有对象都被设置的颜色填充。
您必须调用noFill()才能禁用填充几何。

例如

如果执行以下操作,将填充rotateAbout中绘制的对象:

fill(100, 100, 10);
rotateAbout(0, 0);

如果您这样做,他们将不会被填补:

noFill();
rotateAbout(0, 0);

请注意,填充颜色之类的状态甚至会保留在框架之外。如果将填充颜色设置为draw的末尾,则下次再次输入draw时,该颜色仍将设置。
状态保持到下一次调用fill()noFill()为止。