javascript HTML5 Canvas：更好地重新绘制对象或使用位图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7674421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas: better to re-draw objects or use bitmaps?
提问by travelboy
My project has an HTML5 Canvas on which graphical objects are drawn repeatedly. These objects change rapidly. Drawing them takes time. How can I make it faster?
我的项目有一个 HTML5 画布，在其上重复绘制图形对象。这些对象变化很快。绘制它们需要时间。我怎样才能让它更快？
The objects are not overly complex but contain things like arcs, gradients, polygons.
对象并不过分复杂，但包含弧、渐变、多边形等内容。
The look of an object depends on about 10 properties which each have one of about 10 values. That means that there are only about 100 different appearances than an object can have. That's why I'm thinking about only drawing each appearance once and then caching a bitmap for re-use.
对象的外观取决于大约 10 个属性，每个属性都有大约 10 个值之一。这意味着一个物体可以有大约 100 种不同的外观。这就是为什么我考虑只绘制每个外观一次然后缓存位图以供重用的原因。
Everything must work on the client (i.e. I cannot use ready-made images)
一切都必须在客户端上工作（即我不能使用现成的图像）
- What would be the best way to do this with HTML5 Canvas?
- Is it a good idea at all or is the overhead of working with bitmaps greater than re-drawing the objects every time?
- 使用 HTML5 Canvas 执行此操作的最佳方法是什么？
- 这是一个好主意还是使用位图的开销大于每次重新绘制对象？
回答by Loktar
Cache cache cache! Check out this article by Simon Sarris, and my own findings. Basically you make a canvas in memory copy the contents there and you can reuse them. You will see huge performance increases doing this.
缓存缓存缓存！查看Simon Sarris 的这篇文章，以及我自己的发现。基本上你在内存中制作一个画布，复制那里的内容，你可以重用它们。这样做你会看到巨大的性能提升。
Rotating sprites without caching
Rotating sprites WITH caching(walk upwards to find the zombies)
带缓存的旋转精灵（向上走找到僵尸）
You should see a pretty big improvement in the 2nd example.
您应该会在第二个示例中看到相当大的改进。
EDIT
编辑
Simon posted this in the comments, which should really clear things up if you can't see the performance gains by just looking at the demos.
西蒙在评论中发布了这一点，如果您仅通过查看演示无法看到性能提升，这应该真的很清楚。
回答by Federico Zancan
Depending on how many objects could change in a second, and consequentially how many objects you have to redraw and how - within the same second, redrawing more than caching could be quite an option.
取决于有多少对象在一秒钟内可以改变，因此有多少对象必须重绘以及如何 - 在同一秒内，重绘比缓存更多可能是一个不错的选择。
On a general basis I would suggest to consider the following decisional path.
一般来说，我建议考虑以下决策路径。
You mentioned that there can be 100 different ways for one of your objects to appear.
您提到您的一个对象可以有 100 种不同的显示方式。
This could be considered similar to a minimum of 99^2 theoretically possible status transitions for each of your objects.
这可以被认为类似于每个对象的最少 99^2 个理论上可能的状态转换。
Are these status transitions dramatic in shape / size / color, but they're still well-identified, marked and manageable? If so, caching just once 100 different appearances to be used by all of your objects could be a significant performance improvement.
这些状态转变在形状/大小/颜色上是否具有戏剧性，但它们仍然可以很好地识别、标记和管理？如果是这样，将所有对象使用的 100 种不同外观缓存一次可能会显着提高性能。
Conversely, if - just for example - the background hardly changes and the drawn part occupies a less relevant part of the object area you could seriously consider redrawing it every time.
相反，如果 - 仅举个例子 - 背景几乎没有变化并且绘制的部分占据了对象区域的不太相关的部分，您可以认真考虑每次重新绘制它。
In fact, a pre-rendered image could not fit your needs for performance if your drawn object changes dynamically and especially on a continuous basis, as a pre-rendered image needs to be drawn completely at every state transition while redrawing the object could mean less computational load.
事实上，如果绘制的对象动态变化，尤其是连续变化，则预渲染图像无法满足您的性能需求，因为在每次状态转换时都需要完全绘制预渲染图像，而重绘对象可能意味着更少计算负荷。
