在Chrome浏览器上，使用Canvas的drawImage方法非常缓慢。

Question

我一直在尝试使用drawImage将大量SVG文件的实例绘制到画布上。通过使用SVG作为源创建单个图像元素，然后在画布上使用drawImage对每个实例进行绘制，我希望即使有大量实例也能在画布上非常快地生成复合图像。

从性能上来看，在Firefox中，这种方法效果很好 - 我可以在约300ms内绘制60000个实例。但是在Chrome上，它非常缓慢：16000个实例需要超过5秒钟。我在jsfiddle上放了一个代码版本，可以演示Chrome上的问题。

下面是我如何调用drawImage的示例，其中画布填充了尽可能多的大小为size x size的图像。我曾经阅读过一条建议，尝试使用第二个隐藏画布来缓冲所有实例，然后使用一个调用更新可见画布。但那并没有影响性能，各个drawImage调用仍然似乎拖慢了整个过程。

对于出了什么问题以及如何解决的任何想法吗？

            svgImg = new Image;

            can.width = 1800; can.height = 900;
            svgImg.onload = function () {
                if (internalSize == size)
                    return;
                internalSize = size;
                var timeBefore = new Date().getTime();
                var tot = 0;

                var canWidth = can.width;
                var canHeight = can.height;
                for (var x = 0; x < canWidth; x += size) {
                    for (var y = 0; y < canHeight; y += size) {
                        ctx.drawImage(svgImg, x, y, size, size);
                        tot++;
                    }
                }
                document.getElementById('count').innerHTML = "Total Count: " + tot;
                var timeAfter = new Date().getTime();
            };
            svgImg.src = "http://www.w3.org/Icons/SVG/svg-logo.svg";
            svgImg.width = size;
            svgImg.height = size;

- DerekMuk

Answer 1

减速1：当源画布或目标画布之一在RAM中，另一个画布在GPU上时出现。

减速2：当src和dest画布大小不同时出现。

---

相关错误：http://code.google.com/p/chromium/issues/detail?id=170021

我也注意到了同样的问题，并简化为将一个空画布绘制到另一个画布的情况。 当画布大小相同时似乎没有问题，但在某一点性能会急剧下降。 这是jspref和我的结果：

请注意255x255到100x100和260x260到100x100的差异。

- forresto

---

这太疯狂了。感谢您进行此测试。 - RadiantHex

这对我也是真的。在我将画布大小设置为完全相同之前，我看到了巨大的延迟。 - Sam Sussman

尽管错误跟踪器显示该错误已修复，但Sam指出当画布大小不同时会出现减速的观点仍然成立。我已更新答案以反映这一点。 - Charlie