将文本放在 p5.js 中的草图之上

Question

我正在尝试使用 p5.js 库创建我的第一个网站，最终目标是创建在线数字作品集。我目前正在处理启动画面，其中我有一些大标题文本填充在简单的黑色背景上的屏幕中心，它会主动调整大小以填充 window.

我想在背景中放置一个简单的涂鸦来增加一些趣味。我的挑战是我不希望这个涂鸦画在我的文字之上，而是将它放在我的文字下方。最初我想无限重绘文本以使其保持在顶部，但我推断没有办法做到这一点，同时仍在其下方设置动画。

我对 HTML / CSS 的了解很少，但是我正在考虑让标题草图的背景透明，单独的草图和涂鸦，并使用 z 索引属性在 CSS 中将涂鸦放在标题下方，这可能吗？

谢谢！

根据建议进一步编辑：

function preload() {
  myFont = loadFont('assets/HighTide.otf');
}

function setup() {
  canvas = createCanvas(window.innerWidth, window.innerHeight);
  title = text("Welcome", width/2, height/2);
  background(30);
  fsize = window.innerHeight/4;
  pg = createGraphics(window.innerWidth, window.innerHeight);
}

function draw() {
  background(30);

  pg.fill(random(0,255), random(0,255), random(0,255));
  //pg.translate(width/2, height/2);
  pg.ellipse(random(window.innerWidth), random(window.innerHeight), 60, 60)

  image(pg, 0, 0);

  textFont(myFont);
  textSize(fsize);
  textAlign(CENTER);
  fill(255);
  text("Welcome", width/2, height/2);
  }

window.onresize = function() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  canvas.size(w,h);
  fsize = window.innerHeight/4;
  title.textSize(fsize);
  width = w;
  height = h;
}

Answer 1

这完全取决于您绘制所有内容的方式，但是如果您在 P5.js 中全部完成，那么您已经准确描述了您需要做什么。

第一步：每一帧，通过调用background()函数清除旧帧。

第 2 步：然后画你的涂鸦。

第 3 步：最后，绘制文本。由于您是在涂鸦之后绘制文本，因此它会显示涂鸦的 "on top"。

这就是大多数 P5.js 草图的工作方式：每一帧，您清除旧帧，然后绘制下一帧。

编辑： 如果你需要一个不清除旧框架但仍显示两个不同图层（你的涂鸦和你的文字）的草图，那么你可以做的是将涂鸦绘制到缓冲区，然后每帧绘制该缓冲区，然后在缓冲区顶部绘制文本。查看 the reference 中的 createGraphics() 函数。

将文本放在 p5.js 中的草图之上

placing text on top of a sketch in p5.js

javascript

css

p5.js