使用rect（）的HTML5 Canvas性能非常差

Question

我正在编写一个游戏，该游戏以以下方式在屏幕顶部显示分数：

    canvasContext.fillStyle = "#FCEB77";
    canvasContext.fillText('  Score: ' + Math.floor(score) + '  Lives: ' + Math.floor(lives) + ' other info: ' + Math.floor(otherInfo));

哪个工作正常。 然后我想做的是在该文本周围画一个方框。 所以我尝试了以下方法：

    canvasContext.rect(2, 1, 210, 30);
    canvasContext.rect(2, 1, 80, 30);
    canvasContext.rect(80, 1, 70, 30);
    canvasContext.strokeStyle = "#FCEB77";
    canvasContext.stroke();

当我运行游戏时，性能的影响令人难以置信。 我正在每帧清除整个画布，但是绘制三个矩形似乎会降低性能。 谁能告诉我为什么，以及如何解决这个问题？

Answer 1

现场演示

尝试添加beginPath方法，例如以下代码：

canvasContext.beginPath();
canvasContext.rect(2, 1, 210, 30);
canvasContext.rect(2, 1, 80, 30);
canvasContext.rect(80, 1, 70, 30);
canvasContext.strokeStyle = "#FCEB77";
canvasContext.stroke();
canvasContext.closePath();

使用路径绘制时，您使用的是虚拟“笔”或“指针”。 没有路径，将导致画布状态机上的直接更改，这会使事情变慢。

在这种情况下， closePath并不是真正必需的，但是可以用来说明用法。

使用和不使用（begin / close）Path尝试演示 ，并比较性能。 我提供了一个粗略的fps计数器，但是足以看到性能下降。

您可能需要在其他浏览器（包括移动设备）上进行检查，因此我设置了JSPerf测试 。