Смешивание элементов холста и CSS3

Я использую HTML5-игру с использованием холста. Теперь я думаю о создании всех текстовых надписей, таких как всплывающие подсказки, речи, infowindows и т.д., Используя HTML-элементы с абсолютной позицией над холстом. Поэтому я могу использовать множество эффектов и переходов, предлагаемых CSS3.

Но я не уверен в производительности. Эти наложения должны быть добавлены и удалены frecuently (что-то вроде MMORPG, так что будет много речевых пузырей и т.д.).

Возможно, есть 2 вопроса относительно производительности:

Обход DOM для добавления/удаления. Может быть, кеш может помочь?
HTML и CSS3.

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

Любые советы, мнения, опыт?

Спасибо заранее.

Ответ 1

Рассмотрите возможность использования только одной из упомянутых двух технологий. Возможно, вы можете освободить это приложение на мобильных устройствах или планшетах. Я думаю, что на этих устройствах будут проблемы с обработкой одновременно. И еще одно: если вы останетесь в холсте, не будет никаких проблем с совместимостью. Это не технический, а мыслящий ответ.

Ответ 2

Единственной лучшей причиной использования DOM для элементов интерфейса в играх HTML5 является обработка событий.

Если вы нарисуете все на холсте, вам нужно будет написать свою собственную логику, чтобы обрабатывать клики и решать, на что было нажато, что вскоре может стать очень сложным, expecialy, если у вас несколько слоев интерфейса.

С элементами DOM (особенно при использовании библиотеки jQuery) это тривиально, и вы можете создавать богатый и интерактивный интерфейс с минимальными усилиями.

Единственным недостатком, о котором я могу думать, является то, что вы можете столкнуться с несогласованностью браузера, особенно если используете CSS3, но снова jQuery поможет с этим.

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

Ответ 3

Один из способов приблизиться к этому - использовать "динамическую" карту изображения за вашим объектом canvas. Затем вы можете использовать dom, как требуется. Обратите внимание, что вам нужно будет пройти клики на холсте до карты изображения.