我目前正在使用canvas元素为游戏开发2D图形引擎。在这个引擎中，各种精灵都有文字标签跟随它们。我做了一些分析以提高性能，并注意到此引擎中最大的FPS-eater是我对context.fillText和contex.drawText的调用，用于在每个帧上绘制这些文本标签。我可以理解这是一个性能钩子，因为光栅化基于矢量的TTF字体并不是一项简单的任务。所以我正在寻找一种通过缓存渲染文本来改进这一点的方法。
我尝试了什么
我认为为了加快速度，我可以绘制一次文本标签，缓存结果，然后绘制这些缓存的结果。所以我试图在第一次需要时将每个文本标签绘制到一个不可见的画布上。但为了做到这一点，我需要知道渲染文本的宽度和高度，以便我可以创建具有适当大小的背景画布。我试图用context.measureText得到这个，但不幸的是很多浏览器没有完全实现它（Firefox只返回宽度，而不是高度或其他任何东西）。
我尝试的另一件事是让浏览器HTML呈现引擎处理文本缓存。因此，我没有使用画布绘制文本标签，而是使用<span>创建了HTML position:absolute元素，将它们添加到画布所在的<div>中，并将它们移动到每个帧周围，以便它们总是他们需要的地方。这种方式在性能方面有效，但它会导致一大堆其他问题。有些可以解决（文本标签捕获点击事件，文本在画布之外绘制）但其他一些不容易修复（画布无法绘制文本）。所以我放弃了这个解决方案。
你有什么想法我能做什么吗？
答案 0 :(得分：1)
对于缓存文本，您可以使用带有visibility: hidden但不是display: none的HTML元素（以便大小调整以容纳内容） - 测量其计算的宽度和高度并使用它来调整缓存源画布的大小。对于HTML元素，请指定相同的字体（使用@font-face）和大小等。
您可能希望在确保@font-face声明中指定的字体已完全加载后执行此操作。 $(document).ready(..) 不可靠地工作。在$(window).load(..)内执行此操作应该是安全的，只有在所有（包括内容和资源都已加载）之后才会触发它。
答案 1 :(得分：-1)
您应该能够离线 setTimeout(...)内的文字呈现，有效地让其他呈现继续顺利进行。