javascript - canvas 的 drawImage 性能 : many small images vs few large

标签 javascript canvas html5-canvas performance

我想知道是否有任何基准或线索可以判断是绘制一张大图像更好还是更频繁地调用 drawImage 来绘制更少的图像。

示例:

我有一个 ~1600x1000 的 Canvas (当全屏时)和一个大小的图像。我每帧都将此图像绘制到我的 Canvas 上(因此我可以保存 ctx.clearRect())。它有大约 6 个对象,我可以在多个 drawImage 调用中轻松地单独绘制每个对象,但我需要执行 clearRect();每一帧。

哪个在性能方面更好?

最佳答案

绘制一些较大的图像会比绘制许多小图像表现更好。

导致性能下降的是实际的 drawImage。调用它的次数最少会产生更好的性能。

根据评论,使用多个 Canvas 可能会获得更好的性能。在确定这是否真的有必要之前,它确实取决于您要实现的目标。如果我们只是谈论 6 张图片,我可能不会发疯,但为背景(绘制一次但您不清除)使用一个 Canvas ,为其他对象使用另一个 Canvas 是合理的。

关于javascript - canvas 的 drawImage 性能 : many small images vs few large,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13859410/

相关文章:

javascript - Canvas:返回到绘制前的状态

javascript - 在 testCollision 函数之后查找矩形的哪一侧发生碰撞

javascript - JS中如何模拟鼠标移动程序生成漂亮的星系?

javascript - Mongoose .js : force always populate

Javascript - 三元运算符 - 比较相同的函数两次?

javascript - 从另一个函数绘图时 Canvas 线不停留

javascript - 生成不带foreignObject标签的svg

javascript - HTML5 Canvas 玩家限制

javascript - 多种 AngularJS 货币格式,使用 i18n(欧元、德国)

javascript - 将 ajax success() 事件中的数据与同一 .js 文件中的其他事件处理程序一起使用