时间戳

首页 > 解决方案 > 为什么 fill() 会影响 p5.js 中的所有函数？

javascript - 为什么 fill() 会影响 p5.js 中的所有函数？

问题描述

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

这是我的代码：

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;
}

标签： javascriptprocessingp5.js

解决方案

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

例如

rotateAbout如果您这样做，将填充绘制的对象：

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

如果您这样做，它们将不会被填充：

noFill();
rotateAbout(0, 0);

请注意，像填充颜色这样的状态甚至会超出帧。如果在末尾设置了填充颜色draw，颜色还是会设置，draw下次输入的时候。
状态一直保持到下一次调用fill()or noFill()。

推荐阅读