Question

因此，我正在p5.js中创建一个项目，旨在重现Matrix rain code效果。在我决定加载自定义字体之前，它运行得非常顺利。当我这样做时，我的帧率大幅下降。而且，我尝试加载的每种自定义字体都是这种情况（仅当我使用loadFont函数时；如果我使用textFont和某些默认字体，它似乎不会变慢）

当然，我在preload函数中使用了loadFont函数，在安装程序中使用了textFont，所以我不知道这是否是已知的东西吗？我如何避免这种情况？

这是问题的最小可行示例：

var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789$+-*/÷=%\"'#&_(),.;:?!\\|{}<>[]^~ "
var font;

var spacing_width = 10;
var spacing_height = 20;

function preload() {
    font = loadFont('matrix_font.otf');
}

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  frameRate(60);
  background(0);

  textFont(font);
  fill(255)
}

var lastUpdate;

function draw() 
{
  background(0);

  var timeSinceLastUpdate = new Date().getTime() - lastUpdate;
  print(timeSinceLastUpdate + "ms") // prints time elapsed between each frame
  lastUpdate = new Date().getTime();

  for(var i = 0; i < 40; i++)
    for(var j = 0; j < 40; j++)
      text(characters[int(random(0, characters.length))], j * spacing_width, i * spacing_height)
}

此代码在控制台中打印大约40-50ms的值，但是当我注释掉textFont（font）这行时；值大约是10-20ms

我正在使用this font，但是我尝试加载的每种字体都有问题

Answer 1

有关此问题的讨论，请参见https://github.com/processing/p5.js/issues/3435

为什么自定义字体会使我的程序变慢？

1 个答案: