HTML5 Canvas性能:加载图像与绘图

Question

我打算用javascript/canvas编写一个游戏,我只有一个问题:在加载图像和使用canvas方法绘图时,我应该考虑哪些性能考虑因素.因为我的游戏将使用非常简单的艺术几何(圆形,正方形,线条),所以这两种方法都很容易使用.我还计划在游戏中实现一个简单的粒子引擎,所以我希望能够在不受性能影响的情况下绘制大量的小对象.

思考？

Answer 1

如果您要绘制带有实心填充的简单形状，那么按程序绘制它们是最适合您的方法。

如果您使用笔触、渐变填充和其他性能敏感的化妆绘制更详细的实体，您最好使用图像精灵。按程序生成图形并不总是有效的。

两者混合使用是可能的。当您的应用程序启动时，在画布上按程序绘制图形实体一次。之后，您可以通过绘制它们的副本来重复使用相同的精灵，而不是重复生成相同的阴影、渐变和笔触。

如果您确实选择绘制精灵，您应该阅读该线程上的一些提示和优化技术。

我个人的建议是只画形状。我了解到，如果您打算使用图像来代替，那么您使用的越多，速度就越慢，并且您最终需要进行离屏渲染的可能性就越大。

Answer 2

从缓存中加载图像比生成图像/从原始资源加载图像要快。但随后您必须预加载图像，以便它们进入缓存。