HTML5画布使用rect()性能非常差

Question

HTML5画布使用rect()性能非常差

javascripthtmlwindows-8html5-canvaswinjs

4

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

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

当我运行游戏时，性能的影响是难以置信的。每一帧我都清除整个画布，但是绘制三个矩形似乎会降低性能。有人能告诉我为什么会这样，并且如何解决吗？

- Paul Michaels

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gustavo Carvalho · Accepted Answer

演示

尝试添加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）和没有（begin/close）Path的情况下进行演示，并比较性能。我提供了一个粗略的fps计数器，但足以看到性能降低。

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