JavaScript的canvas绘图效率

我刚刚在Javascript / HTML5中开始了一些游戏开发的实验,到目前为止,它已经相当不错了。 我有一个简单的testing场景,运行一些基本的input处理,以及几百次的drawImage()调用。 这一切都运行在Chrome上,但不幸的是,它已经突破了Firefox。 我正在使用一个非常大的canvas(1920 x 1080),但它似乎并不像我应该已经达到我的极限。 所以在这个笔记上,我希望提出几个问题:

1)在GPU和drawImage()方面,CPU和GPU究竟做了什么? 恐怕答案可能是“这取决于浏览器”,但任何人都可以给我一些经验法则吗? 我天真地想象,每个drawImage调用都会在GPU上产生纹理四边形,canvas实际上成为渲染目标,但是我想知道,如果我离那里很远,那么…

2)我在这里和那里看过post,有人说在canvas上绘画时不要使用translate(),rotate(),scale()函数。 我只是通过增加一个translate()调用来添加大量的开销,而不是传递x,y到drawImage()? 有些人建议使用“transate3d”等CSS属性,但我不知道如何在场景中使用它们。 它们可以用于单个canvas中的animation精灵吗?

3)我也看到很多post,有人提到建筑前的canvas,然后重新使用它们要比再次发出所有的个人抽奖要快得多。 我猜测我的背景一定要预先制作成一个canvas,但是我应该拿多远呢? 我应该为每个精灵维护一个单独的canvas,在不animation时caching所有的静态图像数据?

非常感谢您的建议!

如果你每次重画整个canvas几次,那么在任何浏览器上都会很慢(在g / f的低规格笔记本电脑上testing的时候有同样的问题)。

你可以看看只重绘你需要的区域,因此减less在每一帧重画的canvas量?

这就是我在小演示程序中获得最大性能的原因。

你可以看看我的回答这个问题: 是否可以在屏幕上显示数百个canvas对象?

由于这两个问题都与绩效有关。