Слияние пикселей для минимизации операций рисования на холсте Html

Question

Привет, я рисую изображение на холсте (html5), и я хочу уменьшить количество вызовов fillRect, которые я делаю, в надежде сделать процесс более эффективным.

Примечание: я называю canvas.fillRect для рисования отдельных пикселей, а пиксели могут быть размером 1x1 или другого размера в зависимости от разрешения, в котором я рисую (поэтому я знаю, что они не называются пикселями, но мой вокальный знак изображения ограничен).

Что я хотел бы сделать, это найти и объединить отдельные пиксели, если они одного цвета. Это уменьшит количество вызовов fillRect и, надеюсь, будет быстрее, чем у меня в настоящее время.

Так позволяет сказать, что у меня есть битовая карта, как это:

[fff, fff, fff] 
[f00, f00, f00] 
[00f, 00f, 00f] 

Вместо того, чтобы 9 звонков в FillRect Я хотел бы сделать 3.

Так что мои вопросы:

1) Что называется этим процессом (поэтому я могу сделать более интеллектуальные исследования, такие как слияние «слияния пикселей», «слияние прямоугольников» и т. Д., Не дает никаких полезных результатов).

2) Каждый осознает любой открытой библиотеки источника, который реализует этот (не должен быть Javascript)

3) Есть ли кто-то думает, что добавление этого шага предварительной обработки будет на самом деле сделать код медленнее в JS?

Спасибо Все

Guido Тапиа

Answer 1

Я согласен с @Jakub, что делает этот вид анализа в Javascript, вероятно, займет гораздо больше времени, чем время, вы экономите путем заполнения меньше прямоугольников (обычно очень быстрая работа для видеокарты). То есть, если вам не придется рисовать один и тот же набор прямоугольников много тысяч раз.

Что касается того, что он называется, ближайшая вещь, которую я могу придумать, это run-length encoding, которая, по общему признанию, является одномерной, а не двух.