使用 p5js 更新文本答案

【问题标题】：Updating text with p5js使用 p5js 更新文本
【发布时间】：2016-03-18 15:31:55
【问题描述】：

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

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

  }

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

【问题讨论】：

标签： canvas processing p5.js

【解决方案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，反正你已经在其中了。

如果您不想绘制整个背景，那么您至少需要在要绘制文本的位置上填充一个矩形。

【讨论】：

【解决方案2】：

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

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

【讨论】：