HTML5画布性能：加载图片vs绘图 [英] HTML5 Canvas Performance: Loading Images vs Drawing

问题描述

我计划使用javascript / canvas编写一个游戏，我只有1个问题：在加载图片和使用canvas的方法绘制时，我应该考虑什么样的性能考虑。因为我的游戏将使用非常简单的几何为艺术（圆，正方形，线），任何一种方法将很容易使用。我也计划在游戏中实现一个简单的粒子引擎，所以我想要能够绘制很多小对象，而没有太多的性能打击。

I'm planning on writing a game using javascript / canvas and I just had 1 question: What kind of performance considerations should I think about in regards to loading images vs just drawing using canvas' methods. Because my game will be using very simple geometry for the art (circles, squares, lines), either method will be easy to use. I also plan to implement a simple particle engine in the game, so I want to be able to draw lots of small objects without much of a performance hit.

想法？

推荐答案

固体填充然后绘制它们的程序是最好的方法为你。

If you're drawing simple shapes with solid fills then drawing them procedurally is the best method for you.

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

If you're drawing more detailed entities with strokes, gradient fills and other performance sensitive make-up you'd be better off using image sprites. Generating graphics procedurally is not always efficient.

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

It is possible to get away with a mix of both. Draw graphical entities procedurally on the canvas once as your application starts up. After that you can reuse the same sprites by painting copies of them instead of generating the same drop-shadow, gradient and strokes repeatedly.

如果你选择绘制精灵应阅读此主题上的一些提示和优化技巧。

If you do choose to draw sprites you should read some of the tips and optimization techniques on this thread.

我的个人建议是绘制形状。我已经知道，如果你要使用图像，那么你使用较慢的东西越多，你越有可能最终需要进行离屏渲染。

My personal suggestion is to just draw shapes. I've learned that if you're going to use images instead, then the more you use the slower things get, and the more likely you'll end up needing to do off-screen rendering.

这篇关于HTML5画布性能：加载图片vs绘图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！