P5JS中frameRate()函数返回值不准确问题求助

阿华AIGC实验室

2026-6-12

解决P5.js帧率显示与设置上限不符的问题

问题原因

你遇到的情况是因为frameRate()函数的返回值是最近几帧的平均实际渲染帧率，而非你设置的上限值。当画布内容简单时，浏览器渲染速度可能快于设置的帧率上限，P5.js会自动插入延迟来控制最大帧率，但短时间内的帧率采样计算可能出现波动，导致显示数值高于设置的120。

解决方案

1. 直接显示目标帧率（若仅需展示设置值）

如果只是需要展示你设定的帧率上限，直接使用定义的变量即可，无需调用frameRate()获取返回值：

var targetFps = 120;

function setup() {
  createCanvas(1920, 1080);
  frameRate(targetFps);
}

function draw() {
  clear();
  textSize(13);
  text(`目标帧率: ${targetFps}`, 20, 20);
}

2. 计算稳定的实际帧率

通过跟踪多帧的时间间隔并取平均值，得到更准确的实际帧率，避免单帧波动影响显示：

var targetFps = 120;
var frameTimestamps = [];
var sampleCount = 30; // 用最近30帧的平均来稳定数值

function setup() {
  createCanvas(1920, 1080);
  frameRate(targetFps);
}

function draw() {
  clear();
  textSize(13);
  
  var currentTime = millis();
  frameTimestamps.push(currentTime);
  
  // 只保留最近sampleCount个时间戳
  if (frameTimestamps.length > sampleCount) {
    frameTimestamps.shift();
  }
  
  if (frameTimestamps.length > 1) {
    // 计算平均帧间隔
    var totalDuration = frameTimestamps[frameTimestamps.length - 1] - frameTimestamps[0];
    var avgDuration = totalDuration / (frameTimestamps.length - 1);
    var actualFps = 1000 / avgDuration;
    
    // 格式化显示帧率
    text(`目标帧率: ${targetFps}, 实际帧率: ${nf(actualFps, 1, 1)}`, 20, 20);
  } else {
    text(`目标帧率: ${targetFps}, 实际帧率: 计算中...`, 20, 20);
  }
}