使用 p5js 更新文本

Question

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

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

  }

问题是，当我更新变量 level 和 points 时，之前的文字绘图仍然在 canvas 和更新版本是用其他数字划掉的数字。更新后如何从 canvas 删除之前的号码？

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() 函数 returns this，你已经在里面了。

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

Answer 2

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

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

使用 p5js 更新文本

Updating text with p5js

canvas

processing

p5.js