2013-03-18 21 views
5

Sto affrontando un problema per disegnare un'immagine complessa usando il tag canvas e usando JavaScript.Editor per canvas disegno

Ho bisogno di uno strumento, o possiamo dire editor, utilizzando il quale posso disegnare qualsiasi immagine. Restituisce il codice Javascript tramite canvas, che posso includere nelle pagine html.

Grazie!

risposta

5

Per immagini davvero complesse, utilizzare Adobe Illustrator per la progettazione (un editor di progettazione di livello mondiale).

Quindi salvare l'immagine nel formato .SVG.

BTW, è possibile caricare il file (ad esempio "yourArt.svg") direttamente in un tag img.

Ma, più alla tua domanda, puoi usare una libreria di disegno su tela chiamata FabricJS per leggere lo svg e disegnarlo su una tela. Il sito web della biblioteca è: http://fabricjs.com/

In alternativa, è possibile utilizzare uno strumento di conversione online per convertire il proprioArt.svg nei comandi di disegno su tela richiesti. Un famoso convertitore di svg-to-canvas è: http://www.professorcloud.com/svg-to-canvas/

Una parola di avvertimento ... queste tecniche potrebbero richiedere il perfezionamento dei comandi di disegno di canvas risultanti, specialmente se la grafica utilizza le tecniche più avanzate di Illustrator.

Le immagini possono essere molto complesse e comunque gestite! Controlla la sezione SVG delle demo di FabricJS: http://fabricjs.com/kitchensink/

+0

Guardando in giro un po 'questo sembra l'unica vera opzione se si desidera creare e manipolare le alcune forme complesse. E gli strumenti per SVG (o altri formati di grafica vettoriale) sono davvero di prim'ordine. –

+0

Anche un altro strumento che è possibile utilizzare è [Microsofts Expression Design] (http://msdn.microsoft.com/en-US/expression) che sembra ora gratuito. Ha la possibilità di esportare in SVG. –

8

Ho un progetto in cui è possibile disegnare forme di tela complesse ed esportarle in un file HTML. È quindi possibile modificare il file come richiesto

Il mio progetto è al http://canvimation.github.com/

Spero che questo sia di aiuto

+1

Eeeek !!! dats gr8 prject really .. – Anurag

+0

questo è un ottimo strumento uomo, grazie per la condivisione, già twitted –

2

Un altro grande strumento online si chiama HTML Canvas Studio.

Si comporta come altri programmi di disegno e al termine, è possibile esportare il disegno in HTML + JS.

Lo strumento può essere trovato qui:http://www.htmlcanvasstudio.com/