Является ли putImageData(...) более производительным, чем drawImage(...)?
Наверное, но мне нужно было это доказать.
Я думаю, это тот же случай, что и с Flash и его Bitmap против BitmapData. По сути, BitmapData - это невизуальный фрагмент данных в растровом изображении, который позволяет выполнять очень простые и быстрые манипуляции.
Я думаю, что для высокопроизводительных решений, таких как игры, извлечение ImageData из каждого изображения (например, каждого спрайта) и кэширование его в словаре "ресурсов" является лучшим решением, чем повторное рисование самих спрайтов поверх холста и снова.
Может ли кто-нибудь доказать это?
2 ответа
Я не возьму на себя ответственность за проведение этого теста, но вы можете четко увидеть эффективность использования drawImage()
с холстом и изображением, а также производительность putImageData()
Вот:
http://jsperf.com/canvas-drawimage-vs-putimagedata/3
На данный момент, drawImage()
намного быстрее чем putImageData()
, Последнее, что я слышал, это не было задумано, и разработчики браузеров пытались улучшить разрыв в производительности.
http://jsperf.com/ предоставляет отличные инструменты для таких сравнений, посмотрите, я думаю, это именно то, что вам нужно.
Кроме того, putImageData не работает, когда полиция того же происхождения сломана
Для больших полотен я обнаружил, что это не имеет большого значения, но putImageData определенно не так эффективен, как drawImage для копирования холстов.
Вот несколько тестов, которые я использовал: http://jsperf.com/canvas-size-test-case/3
У меня действительно были некоторые проблемы с производительностью общего размера исходного холста, независимо от размера данных, которые я на самом деле копирую.