оптимизация Canvas, когда изменения пиксельные известны

В настоящее время я работаю над веб-приложение, в котором известны только единичные изменения пикселов, которые реализуются как событие:оптимизация Canvas, когда изменения пиксельные известны

function pixelChanged(x, y, color)

Они должны быть обращено на холсте , Я попробовал два способа сделать это:

ничья пиксели непосредственно FillRect
запоминания пикселей и положить их на холст с putImageData каждые несколько микросекунд

Теперь оба этих метода, кажется, низкая производительность. Первая приводит к многократным перерисовкам, вторая перерисовывает весь образ, даже если изменилась только небольшая область.

Мой конкретный вопрос: если есть лучший способ реализовать это (может быть, что-то вроде 1., но каким-то образом отложен?).

А если нет, какой из этих методов я должен предпочесть? Как я могу оптимизировать его в этом случае?

Спасибо заранее и наилучшими пожеланиями,

копия

источник

2011-12-02 copy

Вы пытались использовать getImageData(), изменяя там пиксели, а затем putImageData(), когда будете готовы? –

в случае 1. выполняют ли вызовы pixelchanged в одном и том же «цикле вызовов», или существует ли задержка между ними (настройка, пользовательская и т. Д.)? Вы можете попробовать двойную буферизацию. Рисуем на экранном холсте и копируем весь холст на видимый каждые несколько секунд. Не уверен, улучшится ли ваш метод без 2. – Gerben

@JamesClark Нет. Это действительно хорошее улучшение. :-) – copy

Подход, который я принял, состоит в том, чтобы разбить большое изображение на сетку NxN и перерисовать определенные области, которые были изменены. Я нашел приличный размер, который уравновешивает # перерисовки по сравнению с размером перерисовки размером около 50x50 пикселей. Если вам нужно точное оптимальное число для максимального количества px/sec, я имею его где-то из контрольных показателей.

Так что, если у вас есть изменение 60x60, вы будете перерисовывать между 4 и 9 квадратами 50x50.

источник

2011-12-03 00:46:38

Приятная идея, я попробую. – copy

Checkout это article с различными подходами к холст-оптимизации. Я бы предложил вам объединить несколько оптимизаций и посмотреть, как это происходит. Обратите внимание, что наш глаз не распознает частые изменения пикселей на большой площади, поэтому имеет смысл буферизовать изменения вашего пикселя и сразу же сделать несколько изменений. Также обратите внимание, что браузеру требуется несколько миллисекунд, чтобы применить ваши изменения, поэтому не делайте интервалы слишком маленькими.

источник

2011-12-03 00:36:52

оптимизация Canvas, когда изменения пиксельные известны

ответ

Смежные вопросы