Анимация с javascript и холстом

Я могу делать простые анимации с холстом. Но я должен очистить каждый кадр перед рисованием, и это замедляет рисование (fps ~ 15). Я пытался использовать 2 холста, но безуспешно. У вас есть идеи, как я могу увеличить fps? Могу ли я использовать буферизацию? и как?


javascript canvas animation html html5-canvas
person user818996    schedule 28.06.2011    source источник
comment
Можете ли вы опубликовать код? Использование clearRect один раз в каждом кадре не должно сильно влиять на производительность.   -  person TJHeuvel    schedule 28.06.2011
comment
Вы рисуете много изображений? Можете ли вы опубликовать код?   -  person Declan Cook    schedule 28.06.2011
comment
под двумя холстами вы имеете в виду псевдодвойную буферизацию?   -  person Mouseroot    schedule 25.02.2014

Ответы (4)


arrow_upward
2
arrow_downward

Если вы рисуете много изображений, вы можете значительно повысить производительность, рисуя изображения на элементе холста и сохраняя его вместо изображения. Рисование элемента холста на другом элементе холста происходит намного быстрее, чем рисование изображения.

person Declan Cook    schedule 28.06.2011

arrow_upward
0
arrow_downward

Это во многом зависит от того, как вы рисуете анимацию. Манипулирование массивом данных пикселей холста может быть очень медленным, поскольку обход массива в JS медленнее, чем собственный рендеринг с ускорением на графическом процессоре. Это может помочь изолировать только те части холста, которые необходимо перерисовать, а не очищать все это, но вы, возможно, уже знаете это!

person chrisfrancis27    schedule 28.06.2011

arrow_upward
0
arrow_downward

Нет, вам действительно нужно будет чистить его каждый кадр. Но, как указал TJHeuvel, простая очистка холста в каждом кадре не должна влиять на производительность. Проблема, вероятно, заключается в вашей логике обновления переменных содержимого, возможно, в цикле по объектам, которые не предпринимают никаких действий во время обновления рисунка холста.

person Delta    schedule 28.06.2011

arrow_upward
0
arrow_downward

Я сталкивался с этой проблемой и раньше, поскольку у меня экран 1920x1200, и поэтому количество пикселей, которые необходимо очистить холсту, огромно. Это действительно проблема, только если ваш браузер использует программный рендеринг, поскольку у графического процессора с этим проблем не будет.

Одна вещь, которую вы можете сделать (как упоминалось другими до меня), — очистить только части холста.

Еще одна вещь, которую вы можете сделать, это убедиться, что у пользователя включено аппаратное ускорение в его браузере. В Windows вы можете указать пользователю включить аппаратное ускорение в about:flags в Chrome. В IE9 он включен по умолчанию и работает очень хорошо. Я думаю, что Firefox также имеет ускорение Direct2D по умолчанию.

В таких случаях, как Chrome, где пользователи должны устанавливать его вручную, вы можете измерить частоту кадров во время работы вашего приложения, и если оно действительно медленное, покажите им какой-нибудь текст, чтобы убедиться, что в их браузере включено аппаратное ускорение.

person Grant Kot    schedule 29.06.2011