我一直在尝试使用drawImage 将SVG 文件的大量实例绘制到画布上。通过使用 SVG 作为源创建单个图像元素,然后对画布上的每个实例使用 drawImage,我希望即使有大量实例也可以非常快速地在画布中生成合成图像。
就性能而言,这在 Firefox 中效果很好 - 我可以在大约 300 毫秒内绘制 60,000 个实例。但在 Chrome 上速度非常慢:16,000 个实例花费了 5 秒多的时间。我已经把代码的一个版本放在jsfiddle http://jsfiddle.net/7tgL3/11/,它演示了 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;
减速 1:当源画布或目标画布位于 RAM 中且另一个画布位于 GPU 中时发生。
减速 2:当 src 和 dest 画布尺寸不同时发生
相关错误:http://code.google.com/p/chromium/issues/detail?id=170021 http://code.google.com/p/chromium/issues/detail?id=170021
我注意到了同样的问题,并将情况简化为将一张空白画布绘制到另一张空白画布上。当画布尺寸相同时,这似乎不是问题,但在某个时刻,性能会急剧下降。这里是jspref http://jsperf.com/drawimage-large-canvas-to-small,以及我的结果:
请注意 255x255 到 100x100 和 260x260 到 100x100 之间的差异。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)