使用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 在这种情况下并不是真的有必要,但有说明用法.

尝试使用和不使用(开始/关闭)路径演示并比较性能.我提供了一个粗略的fps计数器,但它足以看到性能下降.

您可能需要在其他浏览器(包括移动设备)上进行检查,因此我设置了此JSPerf测试.