我正在尝试使用HTML5画布编写一个简单的raycaster，我的帧速率很差。 Firefox的分析器报告我的运行时80％用于context2d.fillRect（），我在每列用于地板和天花板以及纹理墙上的每个像素。我遇到了this问题，发现fillRect比1x1 px图片快了40％，在chrome上比4％快。他们提到它是如何计算alpha的东西，虽然我假设如果alpha是1，那么它是否会通过不透明渲染？有没有其他方法可以用javascript做很多矩形和像素blitting我应该试试？
答案 0 :(得分：1)
您可以尝试两种解决方案，以减少渲染的CPU使用率。
尝试使用requestAnimationFrame，以便浏览器在准备就绪时呈现画布图形，尤其是当用户在浏览器中打开画布选项卡时。更多信息：https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
第二种解决方案，取决于您的部分或全部内容是否是动态的，是使用JavaScript在您的内存中的其他“隐藏”画布上预渲染部分画布（例如，您将主画布分成4个子画布然后只需要在屏幕上绘制4个元素。）
PS：如果你在使用Firefox并结合多个画布渲染的Mac上将提高你的CPU使用率与Chrome相比
希望这有帮助
答案 1 :(得分：1)
我发现的一个解决方案是每次调用时将fillRect（）调用放在路径中：
canvasContext.beginPath();
canvasContext.rect(1, 1, 10, 10);
canvasContext.fill();
canvasContext.closePath();
似乎对rect（）的调用会增加前一个rect（）调用的路径，如果使用不当，可能会导致内存泄漏或资源使用累积。