P5.js草图在chrome上有可怕的帧率

Question

我使用P5.js开发了几款游戏，并设法让它们以60fps左右的速度运行。可悲的是，我发现他们在很多浏览器上的工作速度都在10fps左右，包括最新版本的chrome和safari。似乎问题来自P5.js。

这是一个显示帧率的非常短的草图。在代码片段上效果很好，但只要我将其设为完整页面，它就会在许多浏览器上变为10 fps。

http://pleaseletme.help/framerate/

如何解决这个问题？我有点失落。

这是P5.js草图

我也发布了这个问题here

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255);
  textAlign(CENTER, CENTER);
  text(frameRate(), width / 2, height / 2);
}

body {
  padding: 0;
  margin: 0;
}

canvas {
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

Answer 1

我认为这取决于画布有多大。如果您的计算机屏幕尺寸非常大，则 P5.js 将不得不运行和渲染更多内容。如果您在较小的画布上操作（比如 800x600），它会以比 3000x1500 高得多的帧率运行。