p5.js | frameRate()函数

介绍

frameRate()函数是p5.js中一个常用的函数。该函数用于设置画布每秒钟的帧数，也就是动画的播放速率。

默认情况下，p5.js调用draw()函数以每秒60次的速率来重新绘制画布。每当draw()函数被执行时，它都会重新绘制画布上的每一个元素。

使用frameRate()函数可以控制画布的帧率，使其更快或更慢。例如，如果你将帧率设置为30，p5.js将每秒调用draw()函数30次，以此来重新绘制画布。

语法

frameRate(fps)

参数

• fps: 一个整型值，表示每秒钟的帧数。例如，调用frameRate(30)将使p5.js每秒执行draw()函数30次。

返回值

该函数没有返回值。

示例

function setup() {
  createCanvas(400, 400);
  frameRate(30); // 设置画布帧率为30
}

function draw() {
  background(220);
  circle(200, 200, 100);
}

在上面的例子中，我们调用了frameRate(30)函数，将画布的帧率设置为30。在每次调用draw()函数时，画布将被重绘30次。这将使画布动画更加平滑。

注意事项

在设置画布的帧率时，需要注意以下几点：

• 帧率过高可能会过度占用CPU，导致程序崩溃。
• 如果画布帧率过低，动画可能会看起来卡顿。
• 在调用frameRate()函数以外的地方也可以调用该函数。例如，你可以在mousePressed()函数中调用frameRate()函数，以便根据需要动态更改画布的帧率。