Вы правы, что это очень медленно на устройствах Android, я столкнулся с той же проблемой, и, просматривая Интернет, я нахожу только людей, которые согласны с нами.
Я сделал несколько вещей, чтобы ускорить процесс (хотя и с более низким качеством). Я также только проверил на HTC Sensation и Samsung Galaxy Tab 10.1. Я думаю, что вам нужно будет использовать разные настройки для разных телефонов.
- установите размер экрана таким образом, чтобы мой телефон не создавал холст большего размера, а затем снова уменьшите его.
- масштабирование сцены в 2 раза. Это позволит сократить используемые пиксели пополам, так что у вас на самом деле будет холст меньшего размера, растянутый на весь экран
- не используйте clearRect, чтобы очистить весь холст, а затем перерисовать все. На самом деле удаление clearRect с вашего примера прыгающего мяча покажет много улучшений. Очистки областей, которые действительно изменяются (летучие мыши и мяч), а затем перерисовать его будет достаточно.
С другой стороны, я не заметил, что android 2 и 4 работают быстрее, чем 3, но это основано на тестировании всего с 3 устройствами, так что не сложная статистика.
Я также читал, что использование translate3d на холсте вызовет аппаратный рендеринг, если он доступен, но я не проверял / не подтверждал это.
Код, который может вам помочь:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"/>
$(gameEl).css('-webkit-transform', 'scale3d(2, 2, 0) translate3d(0, 0, 0)');
$(gameEl).css('-webkit-transform-origin', '0 0');