我打算用javascript / canvas编写一个游戏，我只有一个问题：在加载图像和使用canvas'方法绘图时，我应该考虑哪些性能考虑因素。因为我的游戏将使用非常简单的艺术几何（圆形，正方形，线条），所以这两种方法都很容易使用。我还计划在游戏中实现一个简单的粒子引擎，所以我希望能够在没有太多性能影响的情况下绘制大量的小对象。
思想？
答案 0 :(得分：4)
如果您使用实心填充绘制简单形状，则以程序方式绘制它们是最适合您的方法。
如果您正在使用笔画，渐变填充和其他对性能敏感的化妆来绘制更详细的实体，那么最好使用图像精灵。从程序上生成图形并不总是有效的。
两种方式都可以侥幸成功。在应用程序启动时，在画布上以程序方式绘制图形实体。之后，您可以通过绘制它们的副本来重复使用相同的精灵，而不是重复生成相同的阴影，渐变和笔触。
如果你确实选择绘制精灵，你应该阅读一些tips and optimization techniques on this thread。
我个人的建议是画形状。我已经了解到，如果您要使用图片代替，那么您使用的内容越慢，您就越有可能需要进行屏幕外渲染。
答案 1 :(得分：3)
This article讨论了这个主题，并进行了几项测试来对差异进行基准测试。
Conculsions
简而言之 - Canvas喜欢小尺寸的画布，DOM喜欢使用少量元素（尽管Firefox中的DOM太慢而且并非总是如此）。
如果您计划使用粒子，我认为您可能需要查看Doodle-js。
答案 2 :(得分：0)
从缓存中加载图像比从原始资源生成/加载图像更快。但是你必须预先加载图像，这样它们就会进入缓存。
答案 3 :(得分：0)
这实际上取决于您将使用的图形类型，因此我建议您实施最简单的解决方案并解决出现的性能问题。
一般来说，我希望复制一个位图（绘制图像）比从基元重新创建更快，因为图像的复杂性会更高。
那就是每个场景绘制几个正方形应该需要使用任何一种方法大致相同的时间，但复杂的图像将更快地从位图复制。
答案 4 :(得分：0)
与大多数游戏注意事项一样，您可能希望查看需要执行的操作，并使用两者的混合。
例如，如果您正在使用背景图像，那么加载位图是有意义的，特别是如果您将其裁剪为适合画布，但如果您正在制作动态的内容，那么您将需要使用绘图API。
例如，如果你的目标是IE9和FF4，那么在Windows上，你应该从绘图中获得一些好的表现，因为他们正在利用显卡，但是，对于更一般的浏览器，你可能想看看使用精灵，这将是您作为初始化和移动的一部分绘制的图像，或者加载位图图像。
了解您正在查看的游戏类型，图形需要的动态程度，位图图像的大小，您希望的帧速率类型将会有所帮助。
答案 5 :(得分：0)
每个浏览器版本都在变化。我建议遵循Facebook已经启动的HTML5游戏计划和jsGameBench测试套件。它们涵盖了从Canvas到DOM到CSS转换的各种方法，以及它们的性能优缺点。
http://developers.facebook.com/blog/post/454
答案 6 :(得分：0)
如果您只是绘制简单的几何对象，您也可以使用div。它们可以是几个CSS行中的圆形，正方形和线条，您可以将它们放置在任何您想要的位置，几乎所有浏览器都支持这些样式（使用Opera Mini或旧的Android浏览器版本时，移动设备可能会遇到一些问题，当然还有IE7-）但几乎不会有任何性能损失。