Share
Con l'avvento di strumenti come Adobe Edge e librerie come EaselJS, sono disponibili più risorse per gli sviluppatori che desiderano creare contenuti HTML5 interattivi. Molti di questi strumenti sono stati ideati appositamente per gli sviluppatori Flash per rendere fluida la transizione dalla tela di ActionScript all'HTML5. In questo articolo verrà illustrato oCanvas, una libreria HTML5 che gli sviluppatori potrebbero non solo trovare inestimabile, ma anche molto facile da usare.
Prima di immergerci nell'esplorazione di oCanvas, impostiamo rapidamente la scena su come funziona la tela HTML5. Se desideri una spiegazione più approfondita su come utilizzare la tela HTML5, consulta questo tutorial.
Se conosci ActionScript, conosci già un sacco di JavaScript, che è il luogo in cui risiede il vero potere quando lavori con la tela. Usiamo l'API di disegno HTML5 per creare i nostri contenuti insieme a qualche buon vecchio JavaScript per rendere le cose interattive e dinamiche. Ma quando combiniamo i due, l'approccio dietro al modo di assemblare il nostro codice è un po 'diverso da quello a cui siamo abituati con ActionScript.
In breve, per utilizzare l'API Canvas originale, disegniamo pixel sul contesto di disegno della tela. Ma la cosa fondamentale da ricordare è che stiamo lavorando con l'intera tela, non solo una singola forma o immagine che abbiamo disegnato. Ogni volta che vogliamo modificare qualcosa che abbiamo disegnato dobbiamo ridisegnare l'intera tela. Se vogliamo animare qualcosa dobbiamo ridisegnare la tela più e più volte nel nostro JavaScript per far sembrare che le cose si stiano muovendo.
Questa nozione è molto simile all'animazione tradizionale, in cui gli animatori dovevano disegnare ogni posa nella loro sequenza e far muovere la telecamera molto velocemente per simulare il movimento. Ma se sei abituato a strutture ad albero come il DOM, o l'elenco di visualizzazione in Actionscript, questa nozione può essere difficile da capire. Questo approccio di risciacquo e ripetizione alla programmazione è molto diverso dal lavorare con gli oggetti per la maggior parte degli sviluppatori.
Fortunatamente per quelli di noi che sono così abituati a lavorare con gli oggetti, oCanvas porta quell'approccio familiare alla tela HTML5. oCanvas è una libreria JavaScript sviluppata da Johannes Koggdal con l'intento di facilitare lo sviluppo con canvas HTML5. Ti permette di lavorare direttamente con gli oggetti, modificare le loro proprietà e collegarli a tutti mentre gestisci il materiale che ti sta dietro. Come meglio dice Johannes sul suo blog:
Il mio obiettivo è sempre stato quello di rendere davvero facile per le persone costruire oggetti di tela basati su oggetti. Ho deciso sul nome di oCanvas come una contrazione di "canvas dell'oggetto".
Per iniziare a utilizzare oCanvas è necessario includere una copia della libreria nella nostra pagina HTML. Possiamo fare riferimento al file ospitato dal CDN oppure ospitare noi stessi una copia locale. Vai al sito web di oCanvas e puoi scaricare una copia della libreria o prendere il riferimento alla versione ospitata da CDN. La versione corrente è 2.0 ed è stata rilasciata solo poche settimane fa, che ha risolto molti dei bug presenti nella versione iniziale. Sul sito c'è una versione di produzione ridotta, che è buona da usare quando sei pronto per distribuire il tuo progetto. C'è anche una versione di sviluppo, che è non compressa ma è meglio per il debug. Mi piace collegare direttamente alla versione ospitata per un caricamento e una cache più veloci dal browser.
Dopo aver fatto riferimento a oCanvas, è necessario configurare un elemento canvas nel corpo del nostro codice HTML e creare un riferimento ad esso per l'utilizzo nel nostro Javascript.
Come sempre, se si posiziona lo script sopra l'elemento canvas, è necessario avvolgerlo in una funzione in modo da sapere che il DOM è pronto. Ci sono un paio di modi per andare qui. Puoi creare la tua funzione e poi chiamarla nel tuo corpo quando viene caricata, in questo modo:
funzione Main () // codice oCanvas
Oppure puoi avvolgere il codice all'interno del built-in di oCanvas domready () metodo. Questo è l'equivalente di jQuery $ (Document) .ready (). In oCanvas usiamo questo:
oCanvas.domReady (function () // Your Code Here);
Nota: Potresti usare jQuery $ (Document) .ready () metodo se volevi.
Questo pezzo di codice è assolutamente necessario ed è la prima cosa che devi scrivere quando usi oCanvas.
var canvas = oCanvas.create (canvas: "#canvas", background: "# 0cc", fps: 60);
In questo codice memorizziamo un riferimento all'elemento canvas all'interno del nostro documento e otteniamo l'accesso all'istanza principale, che ti consentirà di iniziare a creare oggetti. Il creare() il metodo accetta un oggetto come argomento che controlla il funzionamento di oCanvas. Ci sono numerose proprietà da passare nel creare() metodo, ma l'unico obbligatorio è la proprietà canvas: un selettore CSS che deve puntare a un elemento canvas all'interno del DOM.
Le altre proprietà passate nel codice precedente sono le proprietà background e fps. La proprietà background consente di applicare uno sfondo all'area di disegno, che può essere valori di colore CSS, gradienti e immagini. Se è omesso, la tela sarà trasparente. La proprietà fps imposta il numero di fotogrammi al secondo in cui verrà eseguita l'animazione. Il valore predefinito è 30 fps.
Nota: Mentre analizziamo molte delle funzionalità di oCanvas, ti consiglio di consultare la documentazione della libreria per ottenere una migliore comprensione di ciascuna sezione.
Esistono numerosi tipi di oggetti di visualizzazione che puoi creare con oCanvas. Puoi creare forme come rettangoli, ellissi, poligoni e linee insieme a immagini, testo e persino fogli sprite. Per creare un nuovo oggetto di visualizzazione usiamo il modulo di visualizzazione di oCanvas e specificiamo il tipo di oggetto di visualizzazione che vogliamo creare e alcune proprietà di base, ad esempio:
var box = canvas.display.rectangle (x: 50, y: 150, larghezza: 50, altezza: 50, riempimento: "# 000");
Quindi per aggiungerlo allo schermo, chiamiamo un metodo familiare per gli sviluppatori Flash ...
Sì, un vecchio, ma un piacere, che rende l'aggiunta di oggetti a oCanvas un processo familiare. Quindi per aggiungere la nostra scatola alla tela, scriveremmo:
canvas.addChild (box);
Proprio come in ActionScript, addChild () aggiunge l'oggetto specificato come figlio del chiamante. E a sua volta la xey del bambino sarà relativa al suo genitore. Quindi in questo caso stiamo creando un riquadro della tela, che potremmo semplificare in questo modo:
box.add ();
Il Inserisci() il metodo aggiunge anche l'oggetto alla tela, che è in realtà la stessa cosa di canvas.addChild (box). Ma addChild () è molto utile per aggiungere un oggetto come un bambino a un oggetto di visualizzazione già creato, come:
var square = canvas.display.rectangle (x: 0, y: 0, width: 10, height: 10, fill: "# 990000"); box.addChild (quadrato);
Diamo un'occhiata ad alcuni dei diversi tipi di oggetti di visualizzazione che puoi creare in oCanvas.
Hai già visto un quadrato, ma possiamo usare il rettangolo mostra oggetti per creare molte cose. Ecco un rettangolo con un tratto blu:
var rettangle = canvas.display.rectangle (x: 500, y: 100, width: 100, height: 200, fill: "# 000", stroke: "outside 2px blue");
Il riempire la proprietà può assumere qualsiasi colore CSS valido, insieme ai gradienti CSS e persino ai pattern di immagine.
Per creare un'ellisse scriviamo:
var ellipse = canvas.display.ellipse (x: 100, y: 100, raggio_x: 20, raggio_y: 30, riempimento: "rgba (255, 0, 0, 0.5)");
Se si desidera un cerchio completo, basta sostituire il radius_x e radius_y proprietà con un singolo raggio proprietà.
Creare qualsiasi tipo di poligono regolare è altrettanto semplice: tutto ciò che devi fare è specificare il numero di lati e il raggio che vuoi che la tua forma abbia. Per creare un triangolo:
var triangle = canvas.display.polygon (x: 320, y: 145, lati: 3, raggio: 50, riempimento: "# 406618");
Che ne dici di un pentagono?
var pentagon = canvas.display.polygon (x: 200, y: 50, lati: 5, rotazione: 270, raggio: 40, riempimento: "# 790000");
Per farlo con l'API canvas HTML5, devi disegnare un sacco di percorsi e provare a capire quali posizioni x e y si uniscano a loro. Ho tentato di disegnare un ottagono per paragone, ma come potete vedere qui sotto ho rinunciato abbastanza facilmente. Non sono sicuro di cosa dovrebbe essere.
Accentsconagua
var canvas = $ ("# canvas"); var ctx = canvas.get (0) .getContext ("2d"); ctx.fillStyle = '# 000'; ctx.beginPath (); ctx.moveTo (0, 0); ctx.lineTo (100,50); ctx.lineTo (50, 100); ctx.lineTo (0, 90); ctx.closePath (); ctx.fill (); La creazione di oggetti di visualizzazione con immagini non è più semplice rispetto a oCanvas. Basta specificare una posizione xey e il percorso del file immagine:
var tree = canvas.display.image (x: 100, y: 350, image: "tree.png");
Una bella caratteristica dell'oggetto di visualizzazione dell'immagine è il piastrella proprietà, che consente di creare facilmente una griglia della stessa immagine invece di disegnarla più e più volte.
oCanvas contiene un oggetto di visualizzazione testo e gestisce lo stile dei caratteri proprio come fa il CSS.
var text = canvas.display.text (x: 70, y: 300, align: "center", carattere: "bold 18px sans-serif", testo: "oCanvas Rocks", riempimento: "purple");
Puoi usare molte delle altre proprietà di testo che hai familiarità con CSS. Controlla la documentazione sul testo per ulteriori informazioni.
Tutti gli oggetti di visualizzazione ereditano un gruppo comune di proprietà e metodi. Alcune delle proprietà degli oggetti di visualizzazione più comuni sono: x, y, larghezza, altezza, rotazione, ridimensionamentoX, scalaY, opacità, ombra (usa la sintassi CSS-box-shadow) e zIndex. Puoi controllare questo link per un elenco completo delle proprietà e dei metodi di base. Diamo un'occhiata ad alcuni altri degni di nota.
Questo metodo è un grande risparmio di tempo perché consente di impostare facilmente l'origine all'interno dell'oggetto. In altre parole, consente di impostare il punto di registrazione dell'oggetto. Se hai mai provato a eseguire una rotazione dal centro con l'API Canvas HTML5, sai quanto può essere grande il mal di testa. È necessario eseguire una serie di azioni per salvare lo stato del disegno, tradurre la tela, eseguire la rotazione e quindi ripristinare lo stato del disegno. Con il origine proprietà puoi facilmente definire l'origine di un oggetto:
var obj = canvas.display.image (x: 270, y: 270, origine: x: "centro", y: "centro");
Questo disegnerebbe l'immagine dal suo centro; se dovessimo ruotare l'oggetto, ruoterebbe anche dal suo centro. Oltre al "centro" puoi anche passare in "sinistra" o "destra" per x e "in alto" o "in basso" per le posizioni y. Oltre a utilizzare le parole chiave predefinite, è anche possibile fornire numeri positivi o negativi come valori di dove disegnare l'oggetto. L'origine predefinita per tutti gli oggetti di visualizzazione è definita in alto a sinistra.
Puoi anche usare il SetOrigin () metodo in qualsiasi momento per definire l'origine di un oggetto:
obj.setOrigin ("left", "bottom") L'id di un oggetto di visualizzazione, che è in realtà una proprietà di sola lettura, corrisponde a dove l'oggetto esiste nella lista di disegni, che puoi considerare come l'elenco di visualizzazione. Trovo che sia molto utile perché può fungere da identificatore univoco in determinate situazioni quando potresti cercare un oggetto specifico nel tuo codice. Considera uno snippet di base come questo:
getId (box.id) function getId (id) if (id == 9) console.log ("CORRECT!" + id) else console.log ("WRONG!" + id) La proprietà della composizione è l'equivalente di globalCompositeOperation all'interno dell'API Canvas nativa. Se non hai familiarità con esso, in pratica determina come vengono rappresentati i pixel quando vengono disegnati su pixel già esistenti nell'area di disegno. Ti invito a leggere le diverse operazioni di compositing che puoi impostare, ma con oCanvas puoi semplicemente impostare l'operazione desiderata passandola come una stringa:
var shape = canvas.display.rectangle (x: 270, y: 270, larghezza: 180, altezza: 80, riempimento: "# ff6900", composizione: "destination-atop");
Ci sono molte diverse operazioni che puoi passare, ma penso che una delle cose migliori che puoi fare con la proprietà di composizione sia creare maschere tra diversi oggetti di visualizzazione. Controlla il file chiamato masks.html nel pacchetto di download. Se ti sei mai affidato alla creazione di maschere di livello nelle tue applicazioni Flash, questo ti piacerà.
Poiché abbiamo menzionato prima gli oggetti rotanti, puoi ruotare rapidamente un oggetto con il ruotare() e rotateTo () metodi:
obj.rotate (45);
Puoi anche semplicemente impostare la proprietà di rotazione:
obj.rotation = 45;
C'è anche il mossa() e moveTo () metodi che, come suggeriscono i loro nomi, consentono di spostare un oggetto di una quantità specificata di pixel per il primo e di una posizione xey specificata per quest'ultimo.
obj.moveTo (100, 100)
La stessa idea funziona per scala() e scaleTo () metodi ():
obj.scale (1.25, 0.25) obj.scaleTo (1.5, 1.5)
Abbiamo menzionato addChild () prima; non dimentichiamoci removeChild () e removeChildAt (). E come il Inserisci() metodo, possiamo fare il contrario con rimuovere().
Un altro metodo davvero utile è clone(), che consente di duplicare un oggetto di visualizzazione e tutte le sue proprietà.
var box = canvas.display.rectangle (x: 50, y: 150, larghezza: 50, altezza: 50, riempimento: "# 000"); var box2 = box.clone (x: 200)
Un grande vantaggio di oCanvas è che è possibile aggiungere eventi a oggetti specifici. OCanvas contiene molti metodi e proprietà per gestire facilmente mouse, tastiera e persino eventi touch con un solo metodo.
Se hai familiarità con jQuery, probabilmente già sai dove sto andando con questo.
canvas.bind ("click tap", function () canvas.background.set ("# efefef");); Tutto ciò che fa è cambiare il colore di sfondo della tela, ma nota come passiamo in "click tap" - facilmente permettendoci di aggiungere il supporto per entrambi i mouse e dispositivi touch.
Oltre agli eventi di clic, puoi anche ascoltare altri eventi del mouse:Mousedown, Mouseup, Mousemove, Mouseenter, Mouseleave e DblClick.
Un semplice effetto di rollover potrebbe essere simile a questo:
box.bind ("mouseenter", function () canvas.background.set ("# 333");). bind ("mouseleave", function () canvas.background.set ("# 000"); ); Questo è un esempio di funzioni concatenate - che (per non sembrare un record interrotto) è un'altra funzione jQuery sfruttata in oCanvas.
Ma invece di alterare la tela quando si verifica un evento del mouse, che ne dici di alterare un vero oggetto di visualizzazione? Questo è ancora HTML5 Canvas dopo tutto, quindi dobbiamo ricordare di chiamare un metodo importante per dire al canvas di aggiornarsi.
Il ridisegnare () metodo (che è in realtà parte del modulo Disegna, non del modulo Eventi) ridisegna la tela con tutti gli oggetti di visualizzazione che sono stati aggiunti. Quindi, se vuoi eseguire un'azione su un particolare oggetto e mantenere il resto della lista di disegno rimasto intatto, dobbiamo aggiungere questa semplice linea di codice alle nostre funzioni:
square.bind ("click tap", function () square.x + = 50; canvas.redraw ();); A che serve un ascoltatore di eventi se non possiamo rimuoverlo?
Rectangle.bind ("clic tap", funzione onClick () this.fill = "# FF9933"; canvas.redraw (); rectangle.png ("clic tap", onClick)); Non abbiamo bisogno del bind () metodo per questo. Scriviamo solo:
circle.dragAndDrop ();
Questo è probabilmente il codice di trascinamento e rilascio più rapido e semplice che tu abbia mai scritto.
Nota sugli eventi: Quando lavori con eventi, è naturale voler ottenere quante più informazioni possibili sull'evento. Fortunatamente, possiamo ancora farlo quando lavoriamo con oCanvas. Ad esempio, se prendiamo il gestore di clic di poche righe e registriamo l'evento nella console, possiamo vedere tutte le proprietà che abbiamo dall'evento.
rectangle.bind ("clic tap", funzione onClick (e) this.fill = "# FF9933"; canvas.redraw (); rectangle.log ("clic tap", onClick); console.log (e); ); 
Oltre agli eventi mouse, oCanvas ha interi moduli dedicati alla tastiera e agli eventi touch con i loro metodi e proprietà uniche. Questi eventi sono anche gestiti con bind () metodo. Il sistema degli eventi in oCanvas è un argomento molto ampio, quindi consiglio di dare un'occhiata alla sezione eventi nella documentazione e alla sperimentazione.
Con il modulo Timeline possiamo configurare il nostro ciclo principale per la nostra applicazione. Se stavi creando un gioco, questo sarebbe essenzialmente il tuo ciclo di gioco. Mi piace pensarlo come l'equivalente di un ENTER_FRAME in Flash.
È semplice da configurare: chiamiamo semplicemente il setLoop funzione e catena il inizio() metodo ad esso:
canvas.setLoop (function () triangle.rotation + = 5;). start ();
Se volessimo legare il setLoop () funzione per un evento - diciamo con un clic del mouse - potremmo fare qualcosa di simile a questo:
canvas.setLoop (function () triangle.rotation + = 5;) button.bind ("click tap", function () canvas.timeline.start ()); E potremmo fermare la timeline semplicemente chiamando:
canvas.timeline.stop ();
utilizzando setLoop () è la strada da percorrere per le animazioni che si verificheranno per un lungo periodo di tempo e per gestire gli aggiornamenti costanti che devi eseguire nell'intera applicazione. Ma oCanvas ha integrato metodi per gestire animazioni più semplici e di base che sono comunemente necessarie. Questi metodi sono anche presi praticamente da jQuery.
Il animare() il metodo funziona esattamente come fa in jQuery. Se non hai familiarità con questo lato di jQuery, pensa se è come un motore di tweening come TweenMax o Tweener per Flash. Puoi animare qualsiasi proprietà che può essere impostata con un valore numerico:
circle.animate (y: circle.y - 300, ridimensionamentoX: .5, scalingY: .5, "short", "ease-in", function () circle.fill = "# 45931e"; canvas.redraw (););
Qui animiamo la posizione y del cerchio e le dimensioni generali, applichiamo un po 'di attenuazione, e quando è finita eseguiamo una funzione di callback che cambia il suo colore di riempimento. Ma non dimenticare di chiamare ridisegnare ().
fadeIn (), dissolvenza(), e fadeTo () Per sfumare un oggetto dentro e fuori potremmo semplicemente chiamare:
square.fadeIn (); square.fadeOut ();
Per sfumare l'opacità a un valore specifico, useremmo fadeTo ():
square.fadeTo (0,6);
È inoltre possibile definire la durata, l'andamento e fornire una funzione di callback per questi metodi nello stesso modo in cui si farebbe con animare() metodo.
oCanvas contiene un modulo Scene molto utile che ti consente di separare facilmente la tua applicazione in diversi stati. Gli sviluppatori di giochi potrebbero apprezzare questo perché è un approccio semplice per suddividere il gioco in diverse sezioni. Anche gli animatori Flash di vecchia scuola potrebbero paragonare il modulo Scenes al pannello Scene, che consente di creare letteralmente scene diverse all'interno di un progetto Flash.
Per creare una scena in oCanvas chiamiamo il creare() metodo per restituire a scene oggetto:
var intro = canvas.scenes.create ("intro", function () // aggiungi oggetti di visualizzazione qui); All'interno del creare() metodo passiamo in due argomenti: il nome della scena come una stringa, e una funzione in cui aggiungiamo l'oggetto di visualizzazione che vogliamo aggiungere a quella scena.
var introText = canvas.display.text (x: canvas.width / 2, y: canvas.height / 2, align: "center", carattere: "grassetto 36px sans-serif", testo: "Introduzione", riempimento: "# 133035"); var intro = canvas.scenes.create ("intro", function () this.add (introText);); Ora dobbiamo caricare la nostra scena e quegli oggetti verranno aggiunti al display:
canvas.scenes.load ( "intro");
Notiamo che passiamo nel nome che abbiamo dato alla scena quando l'abbiamo creato.
E ovviamente possiamo scaricare una scena in qualsiasi momento:
canvas.scenes.unload ( "intro");
Immagina quanto potrebbe essere un risparmio di tempo se hai usato scene e gestori di eventi insieme.
L'unico vero svantaggio di oCanvas è che non ha ottenuto la stessa trazione nella comunità di sviluppo come si potrebbe intuire - o almeno sembra così per ora. Parte di questa ragione, penso, è dovuta alla popolarità di EaselJS. Sembra che ci sia molta più consapevolezza e risorse là fuori per EaselJS che per OCanvas - il che è difficile da credere dato che quest'ultimo è stato rilasciato per la prima volta nel marzo 2011, ma per qualche motivo è volato sotto il radar.
Ho usato entrambe le librerie per un bel po 'di tempo e posso dire onestamente che sono un grande fan di entrambi. EaselJS sembra decisamente più come se steste usando ActionScript e se sei uno sviluppatore Flash sarà facile da imparare. E come abbiamo visto, oCanvas potrebbe passare per il fratello perduto di jQuery in molti modi. Quindi, se sei un ActionScripter puro, potresti semplicemente gravitare verso EaselJS- soprattutto perché Easel è stato scritto appositamente per fare appello agli sviluppatori Flash.
Tuttavia, ho usato Actionscript molto più a lungo di jQuery e personalmente trovo OCanvas più semplice da usare e meno prolisso da scrivere. E anche se EaselJS è abbastanza facile da usare, la semplice sintassi di oCanvas lo rende uno strumento davvero gradito.
Ma oltre alla sintassi più semplice, oCanvas e EaselJS in molti modi sono praticamente intercambiabili. Entrambe le librerie possono svolgere più o meno gli stessi compiti e c'è ben poca differenza nelle prestazioni, se ce ne sono. Tuttavia noto che la funzione Ticker in EaselJS funziona un po 'più agevolmente di oCanvas' setLoop funzione (anche se potrebbe essere solo una differenza basata su browser).
EaselJS ha molto più di un'API estesa, specialmente quando si tratta di disegno ed effetti. E se prendi in considerazione TweenJS e SoundJS, Easel è sicuramente uno strumento più completo, specialmente se sei abituato a usare un'applicazione come Flash che offre un controllo preciso sui tuoi progetti. Ma se sei nuovo nell'intero gioco HTML5, è probabile che tu stia andando molto più veloce con oCanvas. Quando sono stato introdotto per la prima volta su oCanvas, l'ho trovato molto divertente da giocare. Tutto è già lì per te - tutti i metodi e gli eventi necessari per iniziare a creare, manipolare e animare oggetti immediatamente.
Qualunque sia la libreria che preferisci, oCanvas e EaselJS sono solo l'inizio di quello che penso sarà un afflusso di strumenti e risorse per consentire agli sviluppatori di creare facilmente applicazioni basate su browser. Le caratteristiche di oCanvas descritte in questo articolo scalfiscono appena la superficie di ciò che potrebbe essere creato usando questa libreria molto potente.
In nessun caso però è oCanvas (o qualsiasi altra libreria per quella materia) un motivo per non imparare e utilizzare l'API HTML5 Canvas nativa. Ma se ti trovi in una situazione in cui tutti i tuoi ex clienti Flash ora stanno cercando di creare app HTML5 (come le mie) e non hai tempo di imparare qualcosa come la matrice di trasformazione ostile nell'API Canvas nativa - oCanvas può sicuramente facilitare la curva di apprendimento.
