使用p5.js绘制Canvas，切换至非活跃标签页时停止绘制该如何解决？

这个问题我之前也碰到过！浏览器为了节省系统资源，当标签页处于后台非活跃状态时，会大幅限制requestAnimationFrame的调用频率——而p5.js默认的draw()循环正是基于这个API运行的，所以就会出现停止绘制或者帧率骤降的情况。下面给你两个实用的解决方案：

方法1：用setInterval手动控制绘制循环 #

直接绕过p5.js的自动循环，用setInterval来定时触发draw函数，这样即使在后台标签页，也能保持稳定的绘制频率。

修改后的代码如下：

function setup() {
  createCanvas(400, 400); // 原代码漏了创建画布的关键步骤，必须加上！
  frameRate(30);
  textSize(30);
  textAlign(CENTER);
  
  // 关闭p5.js的自动draw循环
  noLoop();
  // 用setInterval定时调用draw，间隔对应30fps（1000毫秒/30≈33.3毫秒）
  setInterval(draw, 1000 / 30);
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}

注意：frameCount依然会正常递增，因为p5.js内部会自动维护这个变量。如果需要更精确的自定义计数，也可以自己声明一个变量在draw里累加。

方法2：监听页面可见性，灵活切换绘制模式 #

如果希望在前台标签页保持p5.js原生的高性能绘制（依赖requestAnimationFrame），后台时再用setInterval维持绘制，可以通过监听页面的可见性事件实现：

let drawTimer;
const targetFrameRate = 30;

function setup() {
  createCanvas(400, 400);
  frameRate(targetFrameRate);
  textSize(30);
  textAlign(CENTER);
  
  // 监听页面可见性变化事件
  document.addEventListener('visibilitychange', handlePageVisibility);
}

function handlePageVisibility() {
  if (document.hidden) {
    // 页面隐藏时，关闭自动循环，用定时器触发draw
    noLoop();
    drawTimer = setInterval(draw, 1000 / targetFrameRate);
  } else {
    // 页面恢复可见时，清除定时器，恢复原生循环
    clearInterval(drawTimer);
    loop();
  }
}

function draw() {
  background(200);
  text(frameCount, width / 2, height / 2);
}

这个方案兼顾了前台的流畅性和后台的持续绘制需求，用户切回标签页时会自动恢复到原生的高性能模式。

小提示 #

• setInterval的帧率精度会略低于requestAnimationFrame，但对于大多数非实时渲染的场景完全够用。
• 一定要记得在setup里调用createCanvas()，否则画布都没创建，自然看不到任何绘制内容哦！

内容的提问来源于stack exchange，提问作者Kunanan Tassuwan