Obecnie badam opcje pracy z kanwami w nowej aplikacji HTML 5 i zastanawiam się, jaki jest obecny stan wiedzy w bibliotekach JavaScript i strukturach HTML kanwy?
W szczególności, czy istnieją frameworki, które obsługują rzeczy potrzebne do tworzenia gier - złożone animacje, zarządzanie wykresami scen, obsługę zdarzeń i interakcje użytkowników?
Również chętny do rozważenia zarówno produktów komercyjnych, jak i otwartych.
javascript
frameworks
html
canvas
Toby Hede
źródło
źródło
Odpowiedzi:
Pracowałem nad fabric.js - biblioteką płótna, która pomaga właśnie w tym - manipulowaniu obiektami na płótnie, obsługując zdarzenia i interakcje użytkownika. Nie jest jeszcze wydany, ale spójrz na prostą wersję demonstracyjną .
Możesz go również zobaczyć w akcji w tym edytorze projektów , dla którego został pierwotnie stworzony.
Edycja: Projekt jest teraz dostępny na github (open-source na licencji MIT)
Aby rozpocząć, sprawdź:
Jak wypada Fabric w porównaniu z innymi bibliotekami kanw Javascript? Oto tabela porównawcza .
źródło
Jestem zaskoczony, że nikt nie wspomniał o WebGL i zbudowanych na nim frameworkach. Uważam to za wysoko na liście ze względu na najnowocześniejszą grafikę 3D z akceleracją GPU i złożoną animację na płótnie HTML / javascript.
WebGL jest bardzo solidny w obsłudze grafiki akcelerowanej przez GPU. Sprawdź te demonstracje shaderów GLSL . :-) I zobacz ChemDoodle jako przykład interakcji użytkownika.
Pracowałem nad aplikacją wykorzystującą framework O3D firmy Google , która zarządza wykresem sceny i używa WebGL do renderowania (używał własnej wtyczki). O3D jest w toku, a jego dokumentacja nie jest w pełni aktualna, ale jest w trakcie aktywnego rozwoju i istnieje kilka dobrych wersji demonstracyjnych . Basen 3D może znajdować się najbardziej na twojej alei. Programiści Google bardzo reagują na pytania w grupie dyskusyjnej.
Istnieje wiele innych frameworków opartych na WebGL; zobacz tutaj . Wśród tych, które wspominają o tworzeniu gier i grafach scen, są Copperlicht, SceneJS, X3DOM.
WebGL działa w ostatnich wersjach rozwojowych kilku przeglądarek , ale nie IE. Używałem Firefoksa („Pole minowe”) i Chromium z dobrymi wynikami. Będziesz potrzebować jednego z nich, aby uruchomić powyższe wersje demonstracyjne.
Jednak jeśli Twoim wymaganiem jest to, że nie może mieć żadnych zależności poza kanwą / js HTML 5, WebGL może nie być właściwym wyborem. Wygląda na to, że IE wkrótce go obsłuży.
Aktualizacja: po postawieniu dużego oporu MS zdecydowało się na obsługę WebGL w IE 11 .
źródło
three.js , autorstwa mr. doob , to fantastyczny silnik 3D dla javascript, który zawiera scenegraph (zarówno wersje programowe, jak i przyspieszone sprzętowo WebGL), cieniowanie, cząsteczki, animację skórki (tak mi się wydaje) i efekty świetlne. Sprawdź to, jest super utalentowanym facetem.
Powinienem dodać, że będziesz potrzebować najnowszej przeglądarki Google Chrome lub jej odpowiednika, aby wyświetlić większość wersji demonstracyjnych, jedną z moich ulubionych jest: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html
źródło
KineticJS to wschodząca biblioteka, która szczyci się tworzeniem i animowaniem poszczególnych „warstw” na płótnie w celu uzyskania wysokiej wydajności.
http://www.kineticjs.com/
źródło
CAKE.js nie jest już utrzymywany, ale jest dość potężnym frameworkiem - http://code.google.com/p/cakejs/
Dema tutaj - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html
źródło
Spójrz na framework processingjs . Również nadchodząca wersja Mootools 2.0 ma projekt artystyczny do pracy z płótnem
źródło
Raphael wydaje się całkiem niezłą biblioteką na płótnie; jest oparty na SVG (lub VML w Internet Explorerze), a zatem obsługuje wiele zdarzeń wejściowych użytkownika. Jest dość mały (60kb spakowany gzipem), więc nie jest zbyt dużą zależnością.
Wygląda na to, że ma też fajny tweener: http://raphaeljs.com/reference.html#animate (zobacz tutaj i tutaj, aby zobaczyć przykłady).
Aby zobaczyć przykład tego, co potrafi, spójrz na to sprytne, małe demo .
Mam nadzieję że to pomoże!
źródło
Okazało się, że dwie biblioteki są niezwykle konkurencyjne i znacznie lepsze niż fabric.
Kinetic.js i easel.js mają wyjątkowo dobrą obsługę zdarzeń, grupowanie i ogólną abstrakcję kształtu. W obu tych znajdziesz wiele rzeczy do pokochania; Wydaje się, że sztaluga jest bardziej zorientowana na obraz i filtruje.
Funkcje obsługi zdarzeń w Fabric są DUŻO gorsze niż którekolwiek z nich - w zasadzie traktuje całe płótno jako jeden duży program zdarzeń i informuje, kiedy kliknięto „Coś”. Nie dołącza wydarzeń do pojedynczych kształtów lub grup kształtów.
źródło
Istnieje interesująca biblioteka, której celem jest udoskonalenie niektórych podstaw pracy z interfejsem API kanwy o nazwie canto.js autorstwa Davida Flanagana, autora Javascript: The Definitive Guide .
źródło
Również młody, ale niezły framework Javascript i wszystko na ten temat (złożona animacja, zarządzanie wykresami scen, obsługa zdarzeń i interakcji użytkownika) - jCanvaScript . Może poza „zarządzaniem wykresami sceny”.
źródło
Pracowałem z bHive przy tworzeniu wykresów i przenoszeniu nagłówków witryn, wydaje się imponujący i potężny, w przeciwieństwie do innych, które wydają się być rozwijane. Adobe Edge jest również wart obejrzenia, choć zdecydowanie nie Canvas.
http://www.bhivecanvas.com
i
http://labs.adobe.com/technologies/edge/
źródło
Aves Engine jest naprawdę świetny: http://www.dextrose.com/en/projects/aves-engine
Również Akihabara wydaje się dobra: http://www.kesiev.com/akihabara/
źródło
Jeśli chcesz używać Javascript, Dojo to świetny sposób. Posiada kompaktowy, wieloplatformowy (SVG, VML, Canvas, Silverlight) interfejs API grafiki wektorowej, który jest bardzo wydajny. Możesz go znaleźć w dojo.gfx i dojox.gfx.
Wykorzystaliśmy to do zbudowania interaktywnego nauczyciela fizyki, który pozwala uczniom rysować wektory, elipsy itp. (Nawet dołączać obrazy) i wykonywać na nich różnego rodzaju transformacje. Możesz zobaczyć, co zrobiliśmy na http://gideon.eas.asu.edu/web-UI/login.html - po prostu zaloguj się, używając dowolnej nazwy użytkownika.
Rzuciłem okiem na fabric.js i dojox.drawing robi wiele tych samych rzeczy. Jeśli spojrzysz na testy w zestawie narzędzi (gdy już je masz, jego dojox / rysowanie / testy /), znajdziesz przykłady wszystkiego, od grafiki wektorowej, przez obrazy, po programowo utworzone cienie.
źródło
Jestem pod wrażeniem Akihabary jako silnika gry. Posiada fantastyczną dokumentację w postaci samouczków i api. Widziałem nawet na niektórych forach dyskusyjnych rozmowę o wydaniu akihabara 2. Niestety, wszystko to ma rok lub więcej. Naprawdę mam nadzieję, że ten silnik jest nadal rozwijany.
źródło
Właśnie wydałem pierwszą iterację nowej biblioteki do rysowania i animacji, przeznaczonej dla osób z doświadczeniem w rozwoju AS3 / Flash. Chociaż moja biblioteka nie obsługuje jeszcze złożonych ścieżek rysowania ani wykresów, mam nadzieję, że pomoże ludziom szybko rysować i animować podstawowe prymitywy w znany sposób.
Opinie i komentarze są mile widziane. http://www.quietless.com/kitchen/introducing-js3/
źródło