Каково текущее состояние библиотек и фреймворков JavaScript холста HTML? [закрыто]


107

В настоящее время я изучаю варианты работы с холстом в новом приложении HTML 5, и мне было интересно, каково текущее состояние библиотек и фреймворков JavaScript холста HTML?

В частности, существуют ли фреймворки, которые поддерживают то, что необходимо для разработки игр - сложную анимацию, управление графами сцены, обработку событий и взаимодействие с пользователем?

Также готовы рассмотреть как коммерческие продукты, так и продукты с открытым исходным кодом.


Если вы используете графы сцены и обрабатываете события, разве SVG не лучше подходит для ваших нужд?
Joeri Sebrechts

Что ж, это одна из причин, по которой я спрашиваю. Canvas определенно имеет импульс, поэтому пытаюсь выяснить, что возможно, а что нет. SVG не особенно хорошо масштабируется, когда дело доходит до сложной анимации.
Тоби Хеде,

Вы конкретно ищете 3D-графику, 2D или что-то одно?
LarsH

Еще одна интересная демонстрация здесь: kevs3d.co.uk/dev/asteroids . Не уверен, что созданная ими библиотека доступна для всех. Тем не менее, хороший пример холста.
Кастрохендж

jsfiddle.net/user/zlatnaspirala/fiddles попробуйте этот фреймворк visualJS.
Никола Лукич

Ответы:


96

Скриншот Fabric.js

Я работал над fabric.js - библиотекой холста, которая помогает именно в этом - манипулирую объектами на холсте, обрабатывая события и взаимодействия с пользователем. Он еще не выпущен, но взгляните на простую предварительную демонстрацию .

Вы также можете увидеть его в действии в этом редакторе дизайна , для которого он был изначально создан.

Изменить: проект теперь доступен на github (с открытым исходным кодом под лицензией MIT)

Для начала ознакомьтесь с:

Как Fabric сравнивается с другими библиотеками холста Javascript? Вот сравнительная таблица .


Что он делает в IE? ExplorerCanvas?
Саша Чедыгов

14
Это феноменальная демонстрация, чрезвычайно впечатляющий проект
демонтирован

3
@musicfreak Да, ExplorerCanvas. Кстати, он проходит все ~ 900 тестов в IE9 (4-й превью), используя собственную поддержку холста.
kangax

4
Есть ли где-нибудь страница проекта для fabric.js? Мне очень интересно узнать об этом больше.
Арне Руманн-Куррик

Ого, как раз то, что мне нужно ... Я действительно был разочарован тем, насколько сложно было управлять функциями, которые эта библиотека так легко обрабатывает!
Shouvik

17

Я удивлен, что никто не упомянул WebGL и фреймворки, построенные на нем. Я бы счел его одним из самых современных достижений в области 3D-графики с ускорением на GPU и сложной анимации на HTML-холсте / javascript.

WebGL - это кроссплатформенный бесплатный веб-стандарт для низкоуровневого API трехмерной графики на основе OpenGL ES 2.0, предоставляемый через элемент HTML5 Canvas как интерфейсы объектной модели документа. ...

WebGL предлагает 3D без подключаемых модулей в Интернете, реализованный прямо в браузере. Основные поставщики браузеров Apple (Safari), Google (Chrome), Mozilla (Firefox) и Opera (Opera) являются членами рабочей группы WebGL.

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 запускается на webgl
JqueryToAddNumbers

@nube: хороший момент. Three.js может отображаться на WebGL, SVG или обычном (2D) холсте.
LarsH 01

15

three.js , автор: mr. doob - это фантастический 3D-движок для javascript, который включает в себя граф сцены (версии с программным и аппаратным ускорением WebGL), затенение, частицы, анимацию со скинами (я думаю) и световые эффекты. Посмотри, он суперталантливый парень.

Я должен добавить, что вам понадобится новейший Google Chrome или эквивалент для просмотра большинства демонстраций, один из моих любимых: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html


1
Эта демонстрация на самом деле даже лучше: carvisualizer.plus360degrees.com/threejs
Пьер Анри

13

KineticJS - это многообещающая библиотека, которая может создавать и анимировать отдельные «слои» на холсте для обеспечения высокой производительности.

http://www.kineticjs.com/


github.com/ericdrowell/KineticJS/#mothballed говорит: « Я больше не буду поддерживать это репо или официальный веб-сайт KineticJS, потому что я перешел на другие предприятия и проекты », а GitHub сообщает о 147 открытых проблемах
xmojmr

8

CAKE.js больше не поддерживается, но представляет собой довольно мощный фреймворк - http://code.google.com/p/cakejs/

Демки здесь - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html


2
Потрясающие. Выглядит довольно изысканно. А в мире ОС вы всего в 1 энтузиасте от того, чтобы вас активно поддерживали :)
Тоби Хеде

6

Взгляните на фреймворк processingjs . Также в грядущей версии mootools 2.0 есть арт-проект для работы с холстом.


3
ProcessingJS - интересный подход к проблеме, но, по сути, это процедурный DSL, реализованный на JavaScript, и не уверен, что он может масштабироваться для нетривиальных приложений. Отметим опцию MooTools.
Тоби Хеде,

Да, Processing - это язык прототипирования данных. Факт наличия порта Javascript - это неплохо, но вряд ли это делает его фреймворком HTML 5.
Питер Бэйли,

Вопрос касался фреймворка холста, а не html5, и вот что такое processingJS.
Андреас Кёберле

Простите мою семантическую ошибку. Фреймворк Canvas - вот что я имел в виду.
Питер Бейли,

6

Рафаэль кажется довольно хорошей библиотекой холстов; он основан на SVG (или на основе VML в Internet Explorer) и, таким образом, поддерживает множество событий пользовательского ввода. Он довольно маленький (60 КБ в сжатом виде), поэтому не слишком большая зависимость.
Кажется, у него тоже есть хороший аниматор: http://raphaeljs.com/reference.html#animate (см. Здесь и здесь для примеров).

Чтобы увидеть, что он умеет, посмотрите эту умную маленькую демонстрацию .

Надеюсь это поможет!


10
SVG - это не то же самое, что холст,
Тоби Хеде

4

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

Kinetic.js и moodl.js имеют очень хорошую обработку событий, группировку и общую абстракцию форм. Вы найдете много за что полюбить в обоих из них; мольберт, кажется, больше ориентирован на изображение и фильтрует.

Обработчики событий Fabric НАМНОГО хуже, чем любой из них - в основном он обрабатывает весь холст как один большой обработчик событий и сообщает вам, когда был нажат «Something». Он не связывает события с отдельными фигурами или группами фигур.


2
FWIW, Fabric теперь позволяет прикреплять события непосредственно к объектам и имеет общие групповые функции.
kangax

3

Существует интересная библиотека, которая направлена ​​на улучшение некоторых основ работы с API-интерфейсом Canto, называется canto.js Дэвидом Фланаганом, автором Javascript: The Definitive Guide .


Может быть полезной основой для фреймворка, который обрабатывает вещи более высокого уровня.
Тоби Хеде

3

Кроме того, молодая, но неплохая среда Javascript и все это (сложная анимация, управление графами сцены, обработка событий и взаимодействия с пользователем) - jCanvaScript . Может быть, кроме «управления графами сцены».


3

Работал с bHive над созданием графиков и перемещением заголовков сайтов, кажется впечатляющим и мощным, в отличие от других, которые, похоже, разрабатываются. Adobe Edge тоже заслуживает внимания, но только не Canvas.

http://www.bhivecanvas.com

и

http://labs.adobe.com/technologies/edge/


2

Aves Engine действительно великолепен: http://www.dextrose.com/en/projects/aves-engine

Кроме того, Акихабара кажется хорошим: http://www.kesiev.com/akihabara/


Aves не выпущен и, по-видимому, не использует холст. Тем не менее, довольно впечатляющие демки.
Тоби Хеде,

Авес вообще не использует холст, взгляните на это: paulbakaus.com/2010/07/19/…
alcuadrado

2

Если вы хотите использовать 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 /), вы найдете примеры всего: от векторной графики до изображений и программно созданных теней.


1

Я впечатлен Акихабарой как игровым движком. У него фантастическая документация в виде руководств и api. Я даже видел на некоторых досках сообщений разговоры о выпуске Акихабара 2. К сожалению, все эти разговоры про год или больше. Я очень надеюсь, что этот движок все еще находится в стадии разработки.


1

Я только что выпустил первую итерацию новой библиотеки рисования и анимации, ориентированной на людей с опытом разработки AS3 / Flash. Хотя моя библиотека еще не поддерживает сложные пути рисования или графики, я надеюсь, что она поможет людям быстро рисовать и анимировать базовые примитивы знакомым способом.

Отзывы и комментарии приветствуются. http://www.quietless.com/kitchen/introduction-js3/

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.