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

Posted 2023-03-05

【中文标题】HTML5 Canvas 性能：加载图像与绘图

【英文标题】：HTML5 Canvas Performance: Loading Images vs Drawing

【发布时间】：2011-03-30 03:24:17

【问题描述】：

我正计划使用 javascript / canvas 编写游戏，但我只有一个问题：在加载图像与仅使用 canvas 方法进行绘图时，我应该考虑什么样的性能注意事项。因为我的游戏将使用非常简单的几何图形（圆形、正方形、线条），所以任何一种方法都很容易使用。我还计划在游戏中实现一个简单的粒子引擎，因此我希望能够在不影响性能的情况下绘制大量小物体。

想法？

【问题讨论】：

我真的很想知道这个问题的答案，我要悬赏。

【参考方案1】：

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

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

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

如果您确实选择绘制精灵，您应该阅读一些tips and optimization techniques on this thread。

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

【参考方案2】：

This article 讨论了该主题并进行了多项测试来确定差异。

疑虑

简而言之 — Canvas 喜欢小尺寸的画布，而 DOM 喜欢使用少量元素（尽管 Firefox 中的 DOM 非常慢，并非总是如此）。

如果你打算使用粒子，我想你可能想看看Doodle-js。

【参考方案3】：

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

【参考方案4】：

这实际上取决于您将使用的图形类型，因此我建议您实施最简单的解决方案并解决出现的性能问题。

通常我希望复制位图（绘制图像）比从图元重新创建它更快，因为图像的复杂性越来越高。

也就是说，使用任何一种方法在每个场景中绘制几个正方形都需要大约相同的时间，但是从位图中复制复杂的图像会更快。

【参考方案5】：

与大多数游戏注意事项一样，您可能需要查看您需要做什么，并结合使用两者。

例如，如果您使用的是背景图像，则加载位图是有意义的，尤其是当您将其裁剪以适合画布时，但如果您正在制作动态的东西，那么您将需要使用绘图API。

例如，如果您以 IE9 和 FF4 为目标，那么在 Windows 上，您应该从绘图中获得一些不错的性能，因为它们利用了显卡，但是，对于更通用的浏览器，您可能会希望考虑使用 sprite，这将是您在初始化和移动过程中绘制的图像，或者加载位图图像。

了解您正在查看的游戏类型、图形的动态性、位图图像的大小以及您希望的帧速率类型会有所帮助。

【参考方案6】：

随着每个浏览器的发布，情况都会发生变化。我建议遵循 Facebook 发起的 html5 Games 计划和 jsGameBench 测试套件。它们涵盖了从 Canvas 到 DOM 再到 CSS 转换的各种方法，以及它们的性能优缺点。

http://developers.facebook.com/blog/post/454

http://developers.facebook.com/blog/archive

https://github.com/facebook/jsgamebench

【参考方案7】：

如果您只是绘制简单的几何对象，您也可以使用 div。它们可以是几条 CSS 线条中的圆形、正方形和线条，您可以将它们放置在您想要的任何位置，并且几乎所有浏览器都支持这些样式（使用 Opera Mini 或旧 android 浏览器版本的移动设备可能会遇到一些问题，当然还有IE7-) 但几乎不会对性能造成任何影响。