使用rect()时，HTML5 Canvas的性能非常差

HTML5 Canvas performance very poor using rect()

本文关键字：Canvas 性能 非常 HTML5 rect 使用      更新时间：2023-09-26

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

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

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

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

当使用路径绘图时，您正在使用虚拟的"笔"或"指针"。如果没有路径，将导致canvas状态机的直接更改，从而使程序运行缓慢。

closePath在本例中并不是必需的，但它是用来说明用法的。

尝试使用和不使用(begin/close)路径进行演示，并比较性能。我提供了一个粗略的fps计数器，但它足以看到性能的下降。

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

相关文章：