在 HTML5 画布上绘图的最佳实践、技巧和陷阱是什么 [关闭]答案

【问题标题】：What is the best practices, tips and gotchas for drawing on HTML5 canvas [closed]在 HTML5 画布上绘图的最佳实践、技巧和陷阱是什么 [关闭]
【发布时间】：2013-12-31 01:02:27
【问题描述】：

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

我应该为此使用一个画布还是多个画布（平铺方式）？
drawImage() 或 putImageData() 应该怎么用？
在这种情况下，性能和内存使用情况如何？

你们能推荐最好的读物并分享你的个人经历吗？

【问题讨论】：

标签： javascript html performance canvas html5-canvas

【解决方案1】：

这是我目前所知道的：

Double buffering images -> 非常适合您的速度。

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

A good tip -> 如果你打算使用 putImageData()

我作为 HTML5 游戏开发人员的经验是，这两种做法非常棒，我都使用它们。

When displaying lots of complex objects（我不知道它是否相关，但可能会派上用场，学习如何正确执行此操作真的很棒）

还有； this

【讨论】：

画布不需要双缓冲。如果您查看您链接的那篇文章，则该文章在 cmets 中被揭穿。不过其他提示也不错。
好吧，我的错。可能是链接错误！不过读起来很有趣：html5rocks.com/en/tutorials/canvas/performance

【解决方案2】：

这取决于你这样做的目的，但如果你打算滚动一个 5000px5000px 的图像，我肯定会将它分成几个部分或图块，并使用drawImage 仅绘制用户将看到的部分。

对于绘制大图像，使用putImageData 会降低性能，这正是drawImage 的用途。 putImageData 在处理粒子等方面非常出色。基本上，当您在屏幕上绘制大量小块时，您可以使用 putImageData 轻松绘制 100,000 个对象。

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

Here is a poor unfinished example I was working on for a previous employer 该示例使用了大量的瓷砖，甚至实现了碰撞和寻路并且运行良好。如果我只是画出一张大地图图像，如果我没记错的话大约是 10000x10000（每个图块是 64x64）

【讨论】：