javascript - 为什么 drawImage() 在许多浏览器中比 createPattern() 表现略好/明显好？

Question

在查找如何将重复的图像背景绘制到 <canvas> 上时(是的，我是 <canvas> 的新手)，我看到有两种方法可以做到这一点:

1. 使用drawImage()在for循环以在 <canvas> 中手动重复图像
2. 使用 context.createPattern() 创建一个模式, 设置 <canvas>的 fillStyle到那个模式，然后使用 fillRect绘制一个包含整个图案的矩形 <canvas> .

显然，我做的第一件事是创建一个 JSPerf 测试以查看哪个更快(“过早优化™ — 它有效”):

• http://jsperf.com/createpattern-vs-drawimage

好像drawImage()方式往往优于 createPattern()方式，尽管差异随着更新的浏览器而减少，并且似乎在最新的浏览器中消失了。

我期待 createPattern()方法虽然更快。我假设 createPattern()基本上会做与手册相同的事情 drawImage()方法，但内置，会更快。

关于为什么 createPattern() 的任何想法方法比较慢？是否createPattern()除了在应用它的形状上重复绘制图案图像之外，还会做其他事情吗？我在编写测试时是否犯了错误？

Answer 1

经过一些测试，我得到了相反的结果。

您进行性能测试的方式有点奇怪。我对其进行了规范化并将 javascript 代码从设置移至准备(它应该在的位置)

http://jsperf.com/createpattern-vs-drawimage/2

填充图案似乎比 chrome、IE、Firefox(略)、移动版 chrome(galaxy nexus)、iPad safari 中的循环 drawImage 更快。

此外，简单地制作图案(将 fillRect 与图案一起使用或以其他方式使用)并将其缓存到屏幕外的 Canvas 上并从中绘制应该同样快。这两种方法都应该比使用循环多次调用 drawImage 更快。我将这第三种方式添加为测试中的第三个片段。

此外，图像重复的次数越多，模式或缓存模式的好处应该会显着增加。例如，请看这里:

http://jsperf.com/createpattern-vs-drawimage/3

绘制图像数百次导致 createPattern 的效率比 drawimage 循环高 100-200 倍