В то время как DOM по-прежнему полностью доминирует над тем, как мы создаем пользовательские интерфейсы, имеет ли смысл создавать кучу полностью зависящих от холста компонентов пользовательского интерфейса, таких как кнопки, списки, горизонтальные/вертикальные группы и т.д.?
Я точно знаю, что будет много недостатков, но каковы могут быть такие преимущества?
Во-первых, я бы сказал, что визуальная интеграция с холстом будет намного сложнее.
Нет.
Помните о начале 2000-х годов? Когда все думали, что было бы здорово расы, чтобы придумать самую тошнотворную навигацию по сайту, используя Flash?
Давайте не будем этого делать снова.
Вполне возможно, что некоторые элементы пользовательского интерфейса, которые были пресечены холстом, но помнят, что эти элементы не будут доступны для веб-сканеров (например, Google) или для пользователей, у которых отключены сценарии и т.д.
Также стоит отметить, что в HTML Canvas Spec есть раздел, где они категорически не советуют создавать элементы редактирования текста в Canvas.
Я точно знаю, что будет много недостатков, но каковы могут быть такие преимущества?
Есть много хороших элементов, которые вы можете добавить на страницу с помощью Canvas. Некоторые вещи могут стать действительно красивыми, не навязываясь или не изменяя навигацию по страницам. Возможно, логотип веб-сайта будет "расти" процедурно или сиять или иначе усложняться. Другие эффекты фоновой анимации могут быть действительно опрятными.
Существуют также интерактивные изображения, например, на сайтах, где вам нужна диаграмма или разбивка или покомпонентное представление, которое вы бы проверили, чтобы проверить различные части чего-то (химическая структура, биологический организм, новый автомобиль). Визуальные интерактивные медиа, такие как диаграммы и игры, являются одними из лучших вариантов использования Canvas.
С точки зрения акцентирования пользовательского интерфейса страницы, страница должна также отлично работать, если элементы Canvas не были там.
Но замените кнопки? Заменить текстовые поля? Заменить списки? Точно нет. Это никогда не должно быть областью Canvas.
Проект Zebra создал полный набор компонентов, который визуализируется в элемент холста HTML5. Вот скриншот сэмплера компонентов. Я не использовал фреймворк, но он должен дать вам представление о том, насколько хорошо разные браузеры могут отображать компоненты пользовательского интерфейса.
Поверните компоненты и проверьте качество рендеринга линии (сглаживание), что сильно отличается в зависимости от используемого вами браузера. Вот еще информация о этой проблеме:
Другим проектом является Makepad, рабочая библиотека webGL и редактор живого кода. Каждая видимая часть пользовательского интерфейса отображается в WebGL, включая весь текст на экране, отображаемый с помощью встроенного механизма визуализации текста.
Это еще одна ранняя фаза для проекта, но вы можете попробовать демо-версию здесь. Makepad является открытым исходным кодом, репозиторий Git можно найти на github.com/makepad/makepad.github.io.
Использование Canvas в качестве базы пользовательского интерфейса - отличная идея, если у вас есть > 200 элементов. Это гораздо быстрее, чем использование элементов DOM.
В iPhone Safari 300 анимированных элементов DOM работают со скоростью 3 кадра в секунду (кадров в секунду), очень медленно.
Если вы используете холст, вы можете отображать > 300 элементов и до сих пор добиваться 30 кадров в секунду, что означает плавную анимацию и переходы. Я проверил это подробно, поэтому я знаю, что он работает.
Недостатком Canvas (как кто-то еще упомянул) является то, что поисковые системы не могут видеть ваш контент. Но если вы создаете приложение, которое не следует зашифровывать и нужно запускать на мобильном устройстве, то Canvas - это путь.
Это звучит неплохо. Вы потеряете большую доступность, которую ожидают пользователи, например. фокуса и табуляции. Или вам будет очень много работы, чтобы реализовать все это.
Намного лучше использовать HTML5 и CSS3 для таких вещей. Существует много доступных графических интерфейсов JavaScript, например. см. 15 Javascript Web UI-библиотек, рамок и наборов инструментов.
Мы пробовали что-то подобное, но, наконец, придумали идею о том, что мир еще не готов)
Вы должны иметь в виду следующее
Итак, это действительно интересный опыт, но я бы не рекомендовал.
Вот почему я решил сделать это:
Мое резюме будет отображаться одинаково во всех браузерах.
Я могу повторно использовать код в проекте Go (Google Go). Я использую SFML для установки пикселей, поэтому, пока я не пробую ничего супер "умного", код легко расшифровывается.
Это хорошая практика, и пока плохо переделывать колесо, кто-то должен знать, как это сделать.