No momento, estou investigando opções para trabalhar com o canvas em um novo aplicativo HTML 5 e gostaria de saber qual é o estado da arte atual em bibliotecas e estruturas de JavaScript de canvas HTML?
Em particular, existem estruturas que suportam o tipo de coisas necessárias para o desenvolvimento de jogos - animação complexa, gerenciamento de gráficos de cena, manipulação de eventos e interações do usuário?
Também está disposto a considerar produtos comerciais e de código aberto.
javascript
frameworks
html
canvas
Toby Hede
fonte
fonte
Respostas:
Tenho trabalhado em fabric.js - uma biblioteca de telas para ajudar exatamente nisso - manipulando objetos na tela, manipulando eventos e interações do usuário. Ainda não foi lançado, mas dê uma olhada em uma demonstração de visualização simples .
Você também pode vê-lo em ação neste editor de design , para o qual foi originalmente criado.
Editar: o projeto agora está disponível no github (código aberto sob licença MIT)
Para começar, verifique:
Como o Fabric se compara a outras bibliotecas de canvas Javascript? Aqui está uma tabela de comparação .
fonte
Estou surpreso que ninguém tenha mencionado WebGL e estruturas construídas sobre ele. Eu o consideraria no topo da lista de estado da arte para gráficos 3D acelerados por GPU e animações complexas em canvas / javascript HTML.
WebGL é muito sólido em seu suporte para gráficos acelerados por GPU. Confira essas demonstrações de shader GLSL . :-) E veja o ChemDoodle como um exemplo de interação do usuário.
Estou trabalhando em um aplicativo usando a estrutura O3D do Google , que gerencia o gráfico de cena e usa WebGL para renderização (costumava usar seu próprio plug-in). O3D é um trabalho em andamento e sua documentação não está totalmente atualizada, mas está em desenvolvimento ativo e há algumas boas demos por aí . O 3D Pool pode ser o seu destino. Os desenvolvedores do Google respondem muito bem às perguntas do grupo de discussão.
Existem várias outras estruturas construídas em WebGL; veja aqui . Os que mencionam o desenvolvimento de jogos e gráficos de cena incluem Copperlicht, SceneJS, X3DOM.
O WebGL é executado em compilações de desenvolvimento recentes de vários navegadores , mas não no IE. Tenho usado Firefox ("Minefield") e Chromium com bons resultados. Você precisará de um desses para executar as demos acima.
No entanto, se seus requisitos são que ele não deve ter dependências além do HTML 5 canvas / js, WebGL pode não ser a escolha certa. Não parece que o IE irá suportá-lo tão cedo.
Atualização: depois de oferecer muita resistência, a MS decidiu oferecer suporte ao WebGL no IE 11 .
fonte
three.js , por mr. doob , é um mecanismo 3D fantástico para javascript que inclui scenegraph (versões aceleradas de software e WebGL / hardware), sombreamento, partículas, animação skinned (eu acho) e efeitos de iluminação. Olha só, ele é um sujeito super talentoso.
Devo acrescentar que você vai precisar do mais recente Google Chrome ou equivalente para ver a maioria das demos, uma das minhas favoritas é: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html
fonte
KineticJS é uma biblioteca emergente que se orgulha de criar e animar "camadas" individuais na tela para alto desempenho.
http://www.kineticjs.com/
fonte
CAKE.js não está mais sendo mantido, mas é uma estrutura bastante poderosa - http://code.google.com/p/cakejs/
Demonstrações aqui - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html
fonte
Dê uma olhada na estrutura processingjs . Além disso, a próxima mootools versão 2.0 tem o projeto de arte para trabalhar com tela
fonte
Raphael parece uma ótima biblioteca de telas; é baseado em SVG (ou baseado em VML no Internet Explorer) e, portanto, suporta muitos eventos de entrada do usuário. É bastante pequeno (60kb compactado com gzip), então não é uma dependência muito grande.
Parece ter um tweener legal também: http://raphaeljs.com/reference.html#animate (veja aqui e aqui para exemplos).
Para obter um exemplo do que ele pode fazer, dê uma olhada nesta pequena demonstração inteligente .
Espero que isto ajude!
fonte
Eu descobri que duas bibliotecas são extremamente competitivas e muito melhores do que o tecido.
Kinetic.js e easel.js têm excelente manipulação de eventos, agrupamento e abstração geral de formas. Você encontrará muito o que amar em ambos; cavalete parece ter mais orientação de imagem e filtragem.
Os manipuladores de evento do Fabric são MUITO piores do que qualquer um desses - basicamente ele trata toda a tela como um grande manipulador de eventos e avisa quando "Algo" foi clicado. Ele não anexa eventos a formas individuais ou grupos de formas.
fonte
Há uma biblioteca interessante que visa aprimorar alguns dos fundamentos do trabalho com a API do canvas chamada canto.js, de David Flanagan, autor de Javascript: The Definitive Guide .
fonte
Além disso, uma estrutura Javascript jovem, mas não ruim, e (animação complexa, gerenciamento de gráficos de cena, manipulação de eventos e interações do usuário) tudo sobre isso - jCanvaScript . Pode ser, exceto 'gerenciamento de gráficos de cena'.
fonte
Trabalhar com o bHive para produzir gráficos e mover cabeçalhos de sites, parece impressionante e poderoso, ao contrário dos outros parece estar em desenvolvimento. Adobe Edge também vale a pena dar uma olhada, embora estritamente não seja o Canvas.
http://www.bhivecanvas.com
e
http://labs.adobe.com/technologies/edge/
fonte
Aves Engine é realmente ótimo: http://www.dextrose.com/en/projects/aves-engine
Além disso, Akihabara parece bom: http://www.kesiev.com/akihabara/
fonte
Se você deseja usar Javascript, o Dojo é uma ótima opção. Ele tem uma API de gráficos vetoriais compacta e multiplataforma (SVG, VML, Canvas, Silverlight) muito poderosa. Você pode encontrá-lo em dojo.gfx e dojox.gfx.
Usamos isso para construir um tutor de física interativo que permite aos alunos desenhar vetores, elipses, etc (até mesmo anexar imagens) e realizar todos os tipos de transformações neles. Você pode ver o que fizemos em http://gideon.eas.asu.edu/web-UI/login.html - apenas faça login com qualquer nome de usuário.
Dei uma olhada em fabric.js e dojox.drawing faz muitas das mesmas coisas. Se você olhar os testes no kit de ferramentas (assim que tiver seu dojox / desenho / testes /), você encontrará exemplos de tudo, desde gráficos vetoriais a imagens e sombras criadas programaticamente.
fonte
Estou impressionado com o Akihabara como motor de jogo. Ele tem uma documentação fantástica na forma de tutoriais e uma API. Eu até vi em alguns fóruns de discussão sobre o lançamento do akihabara 2. Infelizmente, toda essa conversa tem cerca de um ano ou mais. Eu realmente espero que este motor ainda esteja sendo desenvolvido.
fonte
Acabei de lançar a primeira iteração de uma nova biblioteca de desenho e interpolação voltada para pessoas com experiência em desenvolvimento AS3 / Flash. Embora minha biblioteca ainda não ofereça suporte a caminhos de desenho ou gráficos complexos, espero que ajude as pessoas a desenhar e animar primitivos básicos rapidamente de uma maneira familiar.
Feedback e comentários são bem-vindos. http://www.quietless.com/kitchen/introducing-js3/
fonte