Я заинтересован в создании игры с использованием html и javascript. Мне было интересно, действительно ли это намного быстрее в html5 и javascript, чем с изображениями и div в html и javascript.
Пример игры с использованием html и javascript, который прекрасно работает: http://scrabb.ly/
Пример игры с использованием html5 и javascript, который отлично работает: http://htmlchess.sourceforge.net/demo/example.html
Я запустил кучу чисел в HTML-чертеже и в холсте. Я мог бы рассказать о преимуществах каждого из них, но я дам некоторые из соответствующих результатов моих тестов для рассмотрения для вашего конкретного приложения:
Я сделал тестовые страницы Canvas и HTML, у обоих были подвижные "узлы". Узлы холста были объектами, которые я создал и отслеживал в Javascript. Узлы HTML были <div> s, хотя они могут быть <image> или <video> тоже.
Я добавил 100 000 узлов к каждому из моих двух тестов. Они выполнялись совершенно по-другому:
Вкладка теста HTML навсегда загрузилась (при минимальном времени менее 5 минут хром попросил убить страницу в первый раз). Менеджер задач Chrome говорит, что вкладка занимает 168 МБ. Он занимает 12-13% процессорного времени, когда я смотрю на него, 0%, когда я не смотрю.
Закладка Canvas загружается за одну секунду и занимает 30 МБ. Это также занимает 13% времени процессора все время, независимо от того, смотрит ли он на него.
Перетаскивание на странице HTML более плавное, что, как я полагаю, ожидается, так как текущая настройка - перерисовать ВСЕ каждые 30 миллисекунд в тесте Canvas. Для этого есть множество оптимизаций для Canvas. (аннулирование холста, являющееся самым легким, также отсекающим областями, выборочным перерисовкой и т.д., зависит только от того, насколько вы чувствуете себя реализацией)
Видео на странице HTML, в то время как я не перемещаю объекты, на самом деле совершенно гладкое.
На холсте видео всегда медленно, так как я постоянно перерисовываюсь, потому что я отключил мою аннулирование холста. Конечно, есть много возможностей для улучшения.
Только рисование/загрузка далеко быстрее в Canvas и имеет гораздо больше возможностей для оптимизации (т.е. исключение простейших вещей очень просто).
Быстро, как в ускоренном рендеринге или более быстрой разработке? Я бы сказал, что ответ на оба - это холст HTML5. Хотя это довольно новая технология и даже не поддерживается всеми основными браузерами, она уже обладает гораздо большей функциональностью, чем при использовании DIV с обычным HTML. Раньше я рисовал с div, и это было невероятно сложно, просто что-то работало. С холстом у вас уже есть каркас, чтобы сделать основной рисунок. Кроме того, html5 является новым. Даже если он относительно медленнее, чем рисовать с помощью div сейчас (чего, вероятно, нет), эта производительность будет возрастать по мере развития и принятия. Я не могу сказать то же самое для рисования с div.
Плюсы использования HTML5 Canvas:
Ни одна из этих игр не требует HTML 5. scrabb.ly делает все с прямоугольными объектами, которые отлично обрабатывают divs, а в шахматной игре даже не используется анимация. Если эта игра, которую вы собираетесь строить, то то, что вы используете, должно решаться на основе знакомства и совместимости, а не производительности.