Tengo el siguiente bloque de código.
Estoy tratando de tener un fondo oscuro y negro. Ya soy capaz de dibujar cosas en este lienzo negro. Ahora, estoy tratando de agregar texto encima de este fondo negro.
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>Cualquier valor distinto de cero, para el fondo (0); Puedo ver mi texto. En el momento en que pongo cero, el texto desaparece pero el resto del dibujo (el arte real que estoy dibujando, que no se muestra en el código anterior) permanece como está.
¿Por qué el fondo (0) borraría el texto?
Nota: el color del texto puede ser cualquier cosa, como blanco puro, pero el problema persiste.
Moví el código de texto a setupDefaultTextStyle.
function setupDefaultTextStyle() { fill(0, 102, 153, 51); textFont(defaultFontType); textSize(defaultTextSize); textAlign(CENTER, CENTER); text(defaultTextContent, defaultTextX, defaultTextY); }Ahora, estoy recibiendo la pantalla. Entonces, el problema está resuelto, pero todavía tengo curiosidad, ¿por qué el texto no funcionaría cuando se llama como una función separada?
El valor alfa que asignó era demasiado bajo para ser visible. (El alfa es el último parámetro en la función de relleno). Además, limpié un poco ya que hiciste un par de variables que podrían evitarse. Puede definir el lienzo primero y luego usar las variables predeterminadas de ancho y alto (ancho y alto del lienzo) para establecer el texto predeterminado X e 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>Su problema claramente no es reproducible. Afirmó que incluso cuando usaba "blanco puro", el texto aún no era visible, pero como puede ver, es visible (los mismos resultados en editor.p5js.org). Solo estás usando un color muy oscuro y en su mayoría transparente.
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>