我正在编写一个游戏,它以下列方式在屏幕顶部显示分数:
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();
当我运行游戏时,性能的影响令人难以置信。我每帧都在清除整个 Canvas ,但绘制三个矩形似乎会降低性能。谁能告诉我为什么,以及如何解决这个问题?
最佳答案
尝试添加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
在这种情况下并不是必需的,只是为了说明用法。
尝试 demo使用和不使用 (begin/close)Path 并比较性能。我提供了一个粗略的 fps 计数器,但足以看出性能下降。
您可能需要在其他浏览器(包括手机)上检查它,所以我将其设置为 JSPerf test .
关于javascript - 使用 rect() 的 HTML5 Canvas 性能很差,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16653905/