Chrome上使用drawImage和Canvas非常缓慢
我一直试图使用drawImage将大量的SVG文件实例绘制到画布上。 通过使用SVG作为源创建单个图像元素,然后使用drawImage为画布上的每个实例创建一个图像元素,我希望即使有大量实例,我也可以非常快速地在画布中生成合成图像。
性能方面,这在Firefox中运行良好 - 我可以在300毫秒内绘制60,000个实例。 但是在Chrome上它非常慢:16,000个实例需要5秒钟。 我在jsfiddle上放了一个代码版本,它演示了Chrome上的问题。
我有一个如何在下面调用drawImage的例子,画布中填充了尽可能多的尺寸为x的图片。 我读过一个建议,尝试使用第二个隐藏画布来缓冲所有实例,然后用一次调用更新可见画布。 但是这并没有影响到性能,单个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:当源画布或目标画布位于内存中而其他画布位于GPU上时发生。
减速2: src和dest画布尺寸不同时发生
相关错误:http://code.google.com/p/chromium/issues/detail?id=170021
我注意到了同样的问题,并简化了将一个空白画布绘制到另一个的情况。 当画布的尺寸相同时,这似乎不成问题,但在某个时刻,表演需要一次潜水。 这里是jspref和我的结果:
注意255x255到100x100和260x260到100x100的差异。
链接地址: http://www.djcxy.com/p/8877.html上一篇: Using drawImage with Canvas is very slow on Chrome
下一篇: How to efficiently render double buffered window without any tearing effect?