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

Question

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

javascriptcssp5.js

3

我正在尝试使用p5.js库创建我的第一个网站，最终目标是建立一个在线数字作品集。我目前正在制作闪屏页，在简单的黑色背景上填充了一些大标题文本，该文本会主动调整大小以填满窗口。

我想在背景中放置一个简单的涂鸦以增加趣味性。我的难题在于，我不想让这个涂鸦画在我的文字上面，而是把它放在我的文字下面。起初，我想一遍又一遍地重绘文本以使其始终在最上面，但我已经推断出在仍可动态演示内容的同时做不到这一点。

我对HTML / CSS的了解很少，但我想让标题草图的背景透明，并用涂鸦制作一个单独的草图，然后使用CSS中的z-index属性将涂鸦放在标题下方，这种方法行得通吗？

谢谢！

基于建议的进一步编辑：

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

- Arkadelic

HTML/CSS有一个 position 属性，我认为这就是你想要的。结合你提到的 z-index，你可以将元素定位在彼此上方，从而获得你所需的效果。https://css-tricks.com/absolute-positioning-inside-relative-positioning/ - willoller

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin Workman · Accepted Answer

这取决于你绘制的方式，但如果你使用P5.js进行绘制，那么你已经描述了你需要做的事情。

步骤1：每一帧，通过调用“background()”函数清除旧帧。

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

步骤3：最后，画你的文本。因为你在涂鸦之后绘制文本，所以它显示在涂鸦“上面”。

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

编辑：如果你需要一个草图，它不清除旧帧但仍显示两个不同的图层（你的涂鸦和你的文本），那么你可以将你的涂鸦绘制到缓冲区，然后每一帧绘制该缓冲区，然后在缓冲区上方绘制文本。查看参考中的“createGraphics()”函数。