p5.js | redraw()函数

简介

在p5.js中，redraw()函数用于强制重新绘制画布。当创建p5.js的绘图窗口后，绘图命令通常只会在画布发生变化时自动触发。然而，有时候我们需要手动调用redraw()函数来更新画布，以便将变更反映在画布上。

使用方法

要使用redraw()函数，你需要首先创建一个绘图窗口。你可以使用createCanvas()函数来创建一个指定宽度和高度的画布。例如：

function setup() {
  createCanvas(400, 400);
}

接下来，你可以在draw()函数中编写你的绘图逻辑。例如：

function draw() {
  background(220);
  // 绘制其他形状或图像等
}

默认情况下，p5.js会自动在画布发生变化时调用draw()函数。但有时候，你可能需要手动调用redraw()函数来强制更新画布。例如，当某个按钮被点击时，你可能希望画布的外观发生变化。你可以在代码的适当位置调用redraw()函数。

function mouseClicked() {
  // 处理点击事件
  redraw(); // 重新绘制画布
}

注意事项

• 调用redraw()函数会立即触发draw()函数。这意味着任何位于draw()函数中的代码都会立即执行。
• 在默认情况下，p5.js每秒会自动调用draw()函数60次。当你调用redraw()函数后，它会重置计时器将立即再次调用draw()函数。
• 如果在没有调用createCanvas()函数之前调用redraw()函数，将会发生错误。

示例

以下是一个使用redraw()函数的简单示例，当点击鼠标时，画布的背景颜色会随机改变：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(random(255), random(255), random(255));
}

function mouseClicked() {
  redraw();
}

以上示例中，每次点击鼠标时，调用redraw()函数会立即重新绘制画布，并触发draw()函数更新背景颜色。

希望这个介绍对你理解p5.js中的redraw()函数有所帮助！