1

我目前正在使用画布元素为游戏开发 2d 图形引擎。在这个引擎中，各种精灵都有跟随它们的文本标签。我做了一些分析来提高性能，并注意到这个引擎中最大的 FPS 消耗者是我对在每一帧context.fillText上contex.drawText绘制这些文本标签的调用。我可以理解这是一个性能挂钩，因为光栅化基于矢量的 TTF 字体并不是一项简单的任务。所以我正在寻找一种通过缓存渲染文本来改善这一点的方法。

我试过的

我虽然为了加快速度，我可以绘制每个文本标签一次，缓存结果，然后绘制这些缓存的结果。所以我尝试在第一次需要时将每个文本标签绘制到一个不可见的画布上。但为了做到这一点，我需要知道渲染文本的宽度和高度，以便创建具有适当大小的背景画布。我试图用 来context.measureText实现它，但不幸的是，许多浏览器并没有完全实现它（Firefox 只返回宽度，而不是高度或其他任何东西）。

我尝试的另一件事是让浏览器 HTML 渲染引擎处理文本缓存。因此，我没有使用画布绘制文本标签，而是使用 创建 HTML<span>元素position:absolute，将它们添加到<div>画布所在的画布中，然后在每一帧中移动它们，以便它们始终位于需要的位置。这种工作在性能方面很有效，但它会导致一大堆其他问题。有些可以解决（捕捉点击事件的文本标签，在画布之外绘制文本），但其他一些则不容易修复（画布无法在文本上绘制）。所以我放弃了这个解决方案。

你有什么想法我还能做些什么吗？

4

2 回答 2

1

为了缓存文本，您可以使用带有visibility: hidden但不带有的 HTML 元素display: none（以便它调整大小以适应内容） - 测量其计算的宽度和高度，并使用它来调整缓存源画布的大小。对于您的 HTML 元素，指定相同的字体（使用@font-face）和大小等。

@font-face在确保声明中指定的字体已完全加载后，您可能需要执行此操作。$(document).ready(..)将无法可靠地工作。这样做应该是安全的，只有在加载了包括内容和资源在内的所有$(window).load(..)内容后才会触发。

于 2012-12-12T14:06:59.450 回答
-1

您应该能够将文本渲染脱机setTimeout(...)，从而有效地让其余的渲染继续顺利进行。

于 2012-12-12T13:33:27.600 回答