Question

我正在尝试使用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;
}

Answer 1

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

第1步：每个框架，通过调用background()函数清除旧框架。

第2步：然后绘制涂鸦。

第3步：最后，绘制文字。由于您在涂鸦后绘制了文本，因此它会显示在＃34;顶部＆＃34;涂鸦。

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

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

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

1 个答案: