Javascript 将文本放置在p5.js中的草图顶部

我正在尝试使用p5.js库创建我的第一个网站，最终目标是一个在线数字组合。我目前正在开发一个初始屏幕，其中一些大标题文本在简单的黑色背景上填充在屏幕的中心，它会自动调整大小以填充窗口

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

我对HTML/CSS的了解很少，但是我想让标题草图的背景透明，一个带有涂鸦的单独草图，并使用CSS中的z索引属性将涂鸦放置在标题下，这可能吗

谢谢

根据建议进一步编辑：

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

---

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

步骤1:每帧调用

background（）

函数清除旧帧

第二步：然后画你的涂鸦

第3步：最后，绘制文本。由于您在涂鸦后绘制文本，因此它显示在涂鸦的“顶部”

这就是大多数P5.js草图的工作原理：每一帧，你清除旧帧，然后绘制下一帧

---

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

createGraphics（）

函数。

HTML/CSS有一个

position

属性，我认为这就是您想要的。结合您提到的

z-index

，您可以将元素放置在彼此的顶部，并获得您想要的效果。从理论上讲，这应该是可行的，但是我的“涂鸦”是进步的，它是建立在自己的基础上的，所以每次都把所有的东西都弄清楚并不一定能达到我想要的效果。我将编辑我的问题，以包括我对上述内容的尝试。^进一步编辑，一切正常，我将如何像我的背景和文本那样响应地调整我的pg图形元素的大小？@Arkadelic Stack Overflow并不是专门为这种来回调整而设计的，因此，如果你有后续问题，你应该在他们自己的新问题帖子中发布。也就是说，基本上，您只需创建一个大小正确的新缓冲区，然后使用

image（）

函数将旧缓冲区绘制到该缓冲区中，该函数获取用于缩放的参数。明白了，谢谢您，请原谅我缺乏适当的礼仪@阿卡德利克没问题，只是觉得我可以帮你省去一遍又一遍地编辑你的帖子的麻烦。做一个新的。祝你好运