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

时间:2013-12-12 14:45:28

标签: javascript html5 performance canvas html5-canvas

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

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

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

2 个答案:

答案 0 :(得分:1)

目前我所知道的是:

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

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

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

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

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

也; this

答案 1 :(得分:0)

这取决于你正在做什么,但是如果你计划在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)