Анимация с использованием JavaScript и холста

Question

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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