使用 rect() 的 HTML5 Canvas 性能非常差答案

【问题标题】：HTML5 Canvas performance very poor using rect()使用 rect() 的 HTML5 Canvas 性能非常差
【发布时间】：2013-05-20 16:23:00
【问题描述】：

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

    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();

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

【问题讨论】：

标签： javascript html windows-8 html5-canvas winjs

【解决方案1】：

LIVE DEMO

尝试添加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 在这种情况下并不是真正需要的，但可以用来说明用法。

尝试demo 使用和不使用（开始/关闭）路径并比较性能。我提供了一个粗略的 fps 计数器，但足以看到性能下降。

您可能需要在其他浏览器（包括手机）上检查这一点，所以我设置了这个JSPerf test。

【讨论】：

正如 Ken 所解释的，您正在累积对 rect 的所有调用 default path（这是我提到的状态机更改）并调用 stroke 将在路径中描边所有矩形，因为应用程序启动。因为您正在运行动画，所以当每帧调用 stroke 时，路径很快就会有很多矩形要绘制。 Demo 可以帮助其他人检查这种效果。