Question

我在绘制循环中定义了从全局变量更新的文本。

  function draw() {
    ...
    levelText = text("level: " + level, 120, 100);
    pointsText = text("points: " + points, 120, 150);
    ...

  }

问题在于，当我更新变量 level 和 points 时，之前的文本绘图仍保留在画布上，更新后的版本是与其他数字划掉的数字。如何在更新时从画布中删除之前的数字？

Answer 1

您必须调用background()函数来清除您绘制的旧框架。否则你只是在绘制已有的东西。像这样：

function draw() {
    background(255, 0, 0); //draws a red background
    text("level: " + level, 120, 100);
    text("points: " + points, 120, 150);
 }

另请注意，我已删除了您的levelText和pointsText个变量。我不确定它们的用途，因为text()函数返回this，你已经在那里了。

如果您不想绘制整个背景，那么您至少需要做一些事情，比如在您要绘制文本的地方填充一个矩形。

Answer 2

调用background()功能是一种选择。但是，如果你可以清除画布，为什么要在旧框架上涂上颜色呢？请使用clear()。这正是函数的用途。

function draw(){
  clear();
  // draw new stuff here
}

使用p5js更新文本

2 个答案: