在HTML5画布上绘制的最佳实践，技巧和难点是什么？

Question

我试图在HTML5画布上绘制大图像（5000 * 5000像素）。 这样做的最佳做法是什么？

• 我应该使用一个画布还是多个画布（瓷砖方式）？
• 我应该使用drawImage（）或putImageData（）？
• 在这种情况下性能和内存使用情况怎么样？

你们可以为此推荐最佳读物并分享你的个人经历吗？

Answer 1

目前我所知道的是：

Double buffering images - ＆gt;非常适合你的速度。

Anti-aliased images - ＆gt;即使调整大小，图像质量也很棒

A good tip - ＆gt;如果您打算使用putImageData（）

我作为HTML5游戏开发者的经验是，这两种做法真的很棒，我同时使用它们。

When displaying lots of complex objects（我不知道它是否相关，但可能派上用场，了解如何正确地做到这一点非常棒）

也; this

Answer 2

这取决于你正在做什么，但是如果你计划在5000px5000px图像上滚动，我肯定会将其分解为部分或图块并使用drawImage仅绘制用户将看到的部分

对于绘制大型图片，您会看到使用putImageData drawImage的效果会降低putImageData。使用粒子等进行任何操作时，putImageData都是惊人的。基本上，当您在屏幕上绘制大量小块时，可以使用{{1}}轻松绘制100,000个对象。

如果您只绘制用户可以看到的部分，那么性能和内存使用应该不是问题，即使完整的5000x5000也不应该太大部分问题。你正在做的事情并不罕见，大多数浏览器应该能够处理它。

Here is a poor unfinished example I was working on for a previous employer 该示例使用了大量的磁贴，甚至可以实现冲突和路径查找，并且可以正常运行。如果我只绘制一个大的地图图像，如果我没记错的话，那将是10000x10000左右（每个图块是64x64）