мы пытались нарисовать большое количество экземпляров файла SVG на холсте, используя drawImage. Создавая единственный элемент изображения, используя SVG в качестве источника, а затем используя drawImage для каждого экземпляра на холсте, я надеялся, что смогу быстро создать составное изображение на холсте даже с большим количеством экземпляров.

Что касается производительности, это хорошо работает в Firefox - я могу нарисовать 60 000 экземпляров примерно за 300 мс. Но в Chrome это ужасно медленно: 16 000 экземпляров занимают более 5 секунд. Я'мы поместили версию кода наjsfiddle, который демонстрирует проблему на Chrome.I '

у меня есть пример того, как яВызываю drawImage ниже, где холст заполнен как можно большим количеством изображений размера x. Я прочитал предложение попробовать использовать второй скрытый холст для буферизации всех экземпляров, а затем обновить видимый холст одним вызовом. Но это неt, влияющие на производительность, отдельные вызовы 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;