В настоящее время я изучаю варианты работы с холстом в новом приложении HTML 5, и мне было интересно, каково текущее состояние библиотек и фреймворков JavaScript холста HTML?
В частности, существуют ли фреймворки, которые поддерживают то, что необходимо для разработки игр - сложную анимацию, управление графами сцены, обработку событий и взаимодействие с пользователем?
Также готовы рассмотреть как коммерческие продукты, так и продукты с открытым исходным кодом.
javascript
frameworks
html
canvas
Тоби Хеде
источник
источник
Ответы:
Я работал над fabric.js - библиотекой холста, которая помогает именно в этом - манипулирую объектами на холсте, обрабатывая события и взаимодействия с пользователем. Он еще не выпущен, но взгляните на простую предварительную демонстрацию .
Вы также можете увидеть его в действии в этом редакторе дизайна , для которого он был изначально создан.
Изменить: проект теперь доступен на github (с открытым исходным кодом под лицензией MIT)
Для начала ознакомьтесь с:
Как Fabric сравнивается с другими библиотеками холста Javascript? Вот сравнительная таблица .
источник
Я удивлен, что никто не упомянул WebGL и фреймворки, построенные на нем. Я бы счел его одним из самых современных достижений в области 3D-графики с ускорением на GPU и сложной анимации на HTML-холсте / javascript.
WebGL очень надежен в поддержке графики с ускорением на GPU. Посмотрите эти демонстрации шейдеров GLSL . :-) И посмотрите ChemDoodle как пример взаимодействия с пользователем.
Я работал над приложением, используя Google платформу O3D , которая управляет графом сцены и использует WebGL для рендеринга (раньше он использовал собственный плагин). O3D находится в стадии разработки, и его документация не обновлена полностью, но он находится в активной разработке, и есть несколько хороших демонстраций . Возможно, вам больше всего понравится 3D-бассейн . Разработчики Google очень отзывчивы на вопросы в группе обсуждения.
Существует ряд других фреймворков, построенных на WebGL; см. здесь . Графики разработки игр и сцен упоминают Copperlicht, SceneJS, X3DOM.
WebGL работает в последних разработках нескольких браузеров , но не в IE. Я использую Firefox («Минное поле») и Chromium с хорошими результатами. Вам понадобится один из них для запуска вышеуказанных демонстраций.
Однако, если ваши требования заключаются в том, что он не должен иметь никаких зависимостей, кроме HTML 5 canvas / js, WebGL может быть неправильным выбором. Это не похож на IE будет поддерживать его в ближайшее время.
Обновление: после большого сопротивления MS решила поддерживать WebGL в IE 11 .
источник
three.js , автор: mr. doob - это фантастический 3D-движок для javascript, который включает в себя граф сцены (версии с программным и аппаратным ускорением WebGL), затенение, частицы, анимацию со скинами (я думаю) и световые эффекты. Посмотри, он суперталантливый парень.
Я должен добавить, что вам понадобится новейший Google Chrome или эквивалент для просмотра большинства демонстраций, один из моих любимых: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html
источник
KineticJS - это многообещающая библиотека, которая может создавать и анимировать отдельные «слои» на холсте для обеспечения высокой производительности.
http://www.kineticjs.com/
источник
CAKE.js больше не поддерживается, но представляет собой довольно мощный фреймворк - http://code.google.com/p/cakejs/
Демки здесь - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html
источник
Взгляните на фреймворк processingjs . Также в грядущей версии mootools 2.0 есть арт-проект для работы с холстом.
источник
Рафаэль кажется довольно хорошей библиотекой холстов; он основан на SVG (или на основе VML в Internet Explorer) и, таким образом, поддерживает множество событий пользовательского ввода. Он довольно маленький (60 КБ в сжатом виде), поэтому не слишком большая зависимость.
Кажется, у него тоже есть хороший аниматор: http://raphaeljs.com/reference.html#animate (см. Здесь и здесь для примеров).
Чтобы увидеть, что он умеет, посмотрите эту умную маленькую демонстрацию .
Надеюсь это поможет!
источник
Я обнаружил, что две библиотеки чрезвычайно конкурентоспособны и намного лучше, чем ткань.
Kinetic.js и moodl.js имеют очень хорошую обработку событий, группировку и общую абстракцию форм. Вы найдете много за что полюбить в обоих из них; мольберт, кажется, больше ориентирован на изображение и фильтрует.
Обработчики событий Fabric НАМНОГО хуже, чем любой из них - в основном он обрабатывает весь холст как один большой обработчик событий и сообщает вам, когда был нажат «Something». Он не связывает события с отдельными фигурами или группами фигур.
источник
Существует интересная библиотека, которая направлена на улучшение некоторых основ работы с API-интерфейсом Canto, называется canto.js Дэвидом Фланаганом, автором Javascript: The Definitive Guide .
источник
Кроме того, молодая, но неплохая среда Javascript и все это (сложная анимация, управление графами сцены, обработка событий и взаимодействия с пользователем) - jCanvaScript . Может быть, кроме «управления графами сцены».
источник
Работал с bHive над созданием графиков и перемещением заголовков сайтов, кажется впечатляющим и мощным, в отличие от других, которые, похоже, разрабатываются. Adobe Edge тоже заслуживает внимания, но только не Canvas.
http://www.bhivecanvas.com
и
http://labs.adobe.com/technologies/edge/
источник
Aves Engine действительно великолепен: http://www.dextrose.com/en/projects/aves-engine
Кроме того, Акихабара кажется хорошим: http://www.kesiev.com/akihabara/
источник
Если вы хотите использовать Javascript, Dojo - отличный способ. Он имеет компактный, кроссплатформенный (SVG, VML, Canvas, Silverlight) API векторной графики, который очень мощный. Вы можете найти его в dojo.gfx и dojox.gfx.
Мы использовали это для создания интерактивного репетитора по физике, который позволяет студентам рисовать векторы, эллипсы и т. Д. (Даже добавлять изображения) и выполнять с ними всевозможные преобразования. Вы можете увидеть, что мы сделали, на http://gideon.eas.asu.edu/web-UI/login.html - просто войдите в систему с любым именем пользователя.
Я взглянул на fabric.js, и dojox.drawing делает то же самое. Если вы посмотрите тесты в наборе инструментов (как только вы получите его dojox / drawing / tests /), вы найдете примеры всего: от векторной графики до изображений и программно созданных теней.
источник
Я впечатлен Акихабарой как игровым движком. У него фантастическая документация в виде руководств и api. Я даже видел на некоторых досках сообщений разговоры о выпуске Акихабара 2. К сожалению, все эти разговоры про год или больше. Я очень надеюсь, что этот движок все еще находится в стадии разработки.
источник
Я только что выпустил первую итерацию новой библиотеки рисования и анимации, ориентированной на людей с опытом разработки AS3 / Flash. Хотя моя библиотека еще не поддерживает сложные пути рисования или графики, я надеюсь, что она поможет людям быстро рисовать и анимировать базовые примитивы знакомым способом.
Отзывы и комментарии приветствуются. http://www.quietless.com/kitchen/introduction-js3/
источник