为什么 Background 0 会使文本在 P5.JS 中消失？

Question

我有以下代码块。

我正在尝试使用深色的黑色背景。我已经能够在这个黑色画布上画东西了。现在，我正在尝试在这个黑色背景上添加文本。

let canvasx = 400;
let canvasy = 400;

let defaultTextSize = 50;
let defaultFontType = 'Georgia';
let defaultTextContent = "P5DRAWINGTREEDEFAULTTEXT";
let defaultTextX = 0;
let defaultTextY = 0;

function setup() {
  defaultTextX = canvasx / 2;
  defaultTextY = canvasy / 2;
  createCanvas(400, 400);
}

function draw() {
  background(0);

  doTheWords();
}

function doTheWords() {
  setupDefaultTextStyle()
  testSimpleTextOne();
}

function setupDefaultTextStyle() {
  fill(0, 102, 153, 51);
  textFont(defaultFontType);
  textSize(defaultTextSize);
  textAlign(CENTER, CENTER);
}

function testSimpleTextOne() {
  text(defaultTextContent, defaultTextX, defaultTextY);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

除零以外的任何值，用于背景（0）；我可以看到我的文字。我输入零的那一刻，文本消失了，但绘图的其余部分（我正在绘制的实际艺术，未在上面的代码中显示）保持原样。

为什么 background(0) 会画掉文本？

注意：文本颜色可以是任何颜色，例如纯白色，但问题仍然存在。

更新 1

我将文本代码移至 setupDefaultTextStyle。

function setupDefaultTextStyle() {
    fill(0, 102, 153, 51);    
    textFont(defaultFontType);
    textSize(defaultTextSize);
    textAlign(CENTER, CENTER);
    text(defaultTextContent, defaultTextX, defaultTextY);
}

现在，我得到了显示。所以，问题解决了，但我还是很好奇，为什么 text 不能作为一个单独的函数调用？

Answer 1

您分配的 alpha 值太低而无法显示。 （alpha 是填充函数中的最后一个参数）。另外，我做了一些清理工作，因为您提出了一些可以避免的变量。您可以先定义画布，然后使用默认的宽度和高度变量（画布的宽度和高度）来设置defaultTextX和Y

let defaultTextSize = 50;
let defaultFontType = 'Georgia';
let defaultTextContent = "P5DRAWINGTREEDEFAULTTEXT";
let defaultTextX = 0;
let defaultTextY = 0;

function setup() {
  createCanvas(400, 400);
  defaultTextX = width / 2;
  defaultTextY = height / 2;
}

function draw() {
  background(0);

  doTheWords();
}

function doTheWords() {
  setupDefaultTextStyle()
  testSimpleTextOne();
}

function setupDefaultTextStyle() {
  fill(0, 102, 153, 255);
  textFont(defaultFontType);
  textSize(defaultTextSize);
  textAlign(CENTER, CENTER);
}

function testSimpleTextOne() {
  text(defaultTextContent, defaultTextX, defaultTextY);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Answer 2

您的问题显然无法重现。您声称即使使用“纯白色”文本仍然不可见，但正如您所见，它是可见的（在 editor.p5js.org 中的结果相同）。您只是使用了一种非常暗且大部分透明的颜色。

let canvasx = 400;
let canvasy = 400;

let defaultTextSize = 50;
let defaultFontType = 'Georgia';
let defaultTextContent = "P5DRAWINGTREEDEFAULTTEXT";
let defaultTextX = 0;
let defaultTextY = 0;

function setup() {
  defaultTextX = canvasx / 2;
  defaultTextY = canvasy / 2;
  createCanvas(400, 400);
}

function draw() {
  background(0);

  doTheWords();
}

function doTheWords() {
  setupDefaultTextStyle()
  testSimpleTextOne();
}

function setupDefaultTextStyle() {
  fill(255);
  textFont(defaultFontType);
  textSize(defaultTextSize);
  textAlign(CENTER, CENTER);
}

function testSimpleTextOne() {
  text(defaultTextContent, defaultTextX, defaultTextY);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>