p5.js | noLoop() 函数

介绍

noLoop() 是 p5.js 中的一个函数，它用于停止绘制连续的图形。默认情况下，p5.js 在 draw() 函数中以每秒 60 次的速度循环绘制图形。但是，当你希望在某个特定条件下停止或暂停绘制时，你可以使用 noLoop() 函数。

语法

noLoop()

用法

在 p5.js 中，每当需要绘制新的帧时，会自动调用 draw() 函数。这导致画布上的内容连续不断地被刷新。然而，在某些情况下，你可能希望在特定的条件下停止绘制，这时你可以使用 noLoop() 函数来暂停绘制过程。

例如，当点击鼠标时停止绘制，你可以在 mouseClicked() 函数中调用 noLoop()：

function mouseClicked() {
  noLoop();
}

以下是一些常见的 noLoop() 的应用场景:

• 当某个事件发生时需要停止绘制，例如点击鼠标，按下某个键等。
• 当需要在某个特定条件下停止绘制，例如某个变量达到特定值，或者时间超过某个限制等。

示例

以下是一个使用 p5.js 的示例程序，当点击鼠标时暂停绘制：

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

function draw() {
  background(220);
  ellipse(mouseX, mouseY, 50, 50);
}

function mouseClicked() {
  noLoop();
}

以上程序会创建一个 400x400 像素的画布，并在画布上绘制一个随鼠标位置移动的圆。当你点击鼠标时，绘制过程会停止。

注意事项

• noLoop() 只会停止连续的绘制过程，不会影响其他事件的回调函数的执行，比如 mouseClicked() 函数还是会被调用。
• 一旦调用了 noLoop() 函数，如果你希望重新开始绘制，可以使用 loop() 函数重新设置绘制循环。

参考文档

• p5.js 参考手册 - noLoop()