什么是在HTML5画布中绘制X个圆圈的最快方式？

在1个画布中绘制100个圆圈还是在100个画布中绘制1个圆圈会更快吗？

2017-02-21 Max

我还没有做过性能测试，我想我会先在这里查询它。它使用的是路径方法。通过绘制到屏幕外的画布，你的意思是什么？这是否假设每个圈子都是一样的？ – Max

在多个工作人员中准备缓冲区，将它们排列在一起并放入画布中。但是这必须比使用直接绘图命令更难 –

这是每个案例的问题，并且都归结为“根据您的要求做出测试性能”。对于具有单一颜色的单个大小的圆圈，putImageData是具有大量实体（> 5000）的最快速度。下面，drawImage（offscreenCanvas）就像需要的一样快。对于具有相同颜色的不断变化的大小圆形，由所有圆圈构成的单个路径可以更快速地达到20000个实体。所以我自己，对于大于15000个圆圈的<20组颜色不断变化的大小圆圈（是的情节......），我会按颜色对我的圆圈进行排序，并使用单个路径选项绘制它们。 – Kaiido

-1

这是一个更容易在一个画布上绘制100圈：

当你有一个叫同样的动作，无论是1个帆布* 100圈，或100个画布* 1圈，你还在讲程序绘制的时间完全相同。

那有什么区别？

当您向程序中引入100个画布时，程序将运行得慢得多，因为它需要将这些画布存储在背景中。虽然速度不会降低太多，但仍然会下降。

1画布的另一个好处是控制一个画布上的所有内容而不是100个画布要容易得多。

编辑：在一个画布上，您也可以将圆圈重叠（如果需要），但如果您有100个画布，则圆圈不能重叠。

我希望这对你有帮助:)

来源

2017-02-21 16:23:24

什么是在HTML5画布中绘制X个圆圈的最快方式？

回答

相关问题