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

Question

我有以下代码块。

我正在尝试使用深色黑色背景。我已经可以在这个黑色上画东西了canvas。现在，我正在尝试在此黑色背景上添加文本。

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

现在，我正在获取显示器。所以，问题已经解决了，但我还是很好奇，为什么文本作为一个单独的函数调用时会不起作用？

Answer 1

您的问题显然不可重现。您声称即使使用“纯白色”，文本仍然不可见，但如您所见，它是可见的（编辑器中的结果相同。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>

Answer 2

您分配的 alpha 值太低，无法显示。（alpha 是填充函数中的最后一个参数）。另外，我做了一些清理，因为你做了几个可以避免的变量。您可以先定义 canvas 然后使用默认的宽度和高度变量（canvas 的宽度和高度）设置 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>

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

Why does Background 0 make text dissapear in P5.JS?

javascript

p5.js

更新 1