Эффективность <canvas> и <div> s

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

Мой проект будет содержать некоторые спрайты (ожидая от 10 до 30 на экране одновременно), и есть несколько способов их реализации. Один из способов - CSS-Sprites, другой - рисование их на холсте. Оба не сложны. Фон будет отображением плитки другим <canvas> в фоновом режиме.

Я видел, что Crafty прикрепляет спрайты как <div>, которые находятся в HTML в <canvas>, как CSS -Sprite. Я не уверен, есть ли разница в скорости, если <div> находится на холсте или нет. Есть ли разница?

Я ожидаю, что пользователь будет взаимодействовать с спрайтами, щелчками мыши, влево, вправо и т.д. И спрайты, конечно, стоят или идут по элементам карты плитки. Так эффективнее ли писать обработчик для <canvas> и найти спрайт, или, скорее, с помощью <div> и разрешить браузеру находить поиск?

Надеюсь, я смогу сообщить о своей проблеме.

Ответ 1

Мои тесты показывают, что чистый HTML + CSS, как правило, быстрее для спрайтов, чем Canvas:
Производительность движущегося изображения на веб-странице с помощью CSS и холста HTML5

Смотрите тесты и результаты (из браузеров 10 месяцев назад) здесь:
http://phrogz.net/tmp/image_move_speed.html

В частности, у меня есть два теста почти точно так же, как ваш вопрос:

Обобщенный FPS:

                  Image  Image  Sprite  Sprite
        Browser  Canvas    CSS  Canvas     CSS
----------------------------------------------
  Safari v5.0.3      59     95      59      89
Firefox v3.6.13      59     95      60      90
 Firefox v4.0b8      75     89      78      82
    Chrome v8.0     108    230     120     204
    iPad, Horiz      17     44       2      14
     iPad, Vert       4     75       2      15

Более поздние браузеры, как правило, намного быстрее (Chrome почти всегда попадает на внутреннюю крышку на 250 кадров в секунду на той же машине) и закрывают пробел больше, но использование Canvas все еще медленнее и намного более эффективно.

Ответ 2

Холст имеет лучшую производительность.

Оптимизирован для такого поведения.

Ответ 3

Холст будет быстрее, хотя при таком низком объекте это не будет иметь большого значения. Вы должны пойти с Canvas независимо от того, что, если вы когда-либо планируете расширить его, чтобы быть более сложным, более полированным или вам нужны специальные эффекты (например, частицы) или иметь больше объектов, полотно станет необходимостью.

Если это будет запущено как игра, используйте Canvas. Но если он будет запущен, как приложение сопоставления, SVG не является плохой альтернативой, поскольку некоторые из них уже сделаны для вас. Я предполагаю, что этот проект ближе к игре.

Я дал гораздо больше ответов на такие вопросы, как здесь: HTML5 Canvas vs. SVG vs. div

Фон будет отображением плитки другим, в фоновом режиме

Для достижения цели, просто установите холст 'css background-image для этой плитки-карты! (если он не изменяется)