Share
Questo è il primo articolo di una serie che ti porterà al passo con la tela HTML5, la funzionalità di disegno senza plug-in integrata nei browser moderni. In questo articolo introduttivo, ti mostrerò come accedere all'elemento canvas, disegnare forme, cambiare i colori e cancellare le cose. Si tratta di un giro di prova sulle basi di questa straordinaria nuova tecnologia Web.
La serie sarà una corsa eccitante, e spero che vi piaccia. Suppongo che tu stia già a tuo agio con JavaScript, ma che tu abbia poca o nessuna esperienza con il canvas. Anche se sei nuovo su JavaScript, non preoccuparti, poiché imparerai ancora qualcosa da questi articoli.
L'utilizzo dell'elemento canvas è estremamente semplice.
Quando pensi alla tela, probabilmente pensi al nuovo HTML5 tela elemento. Tecnicamente, questa è solo una metà della storia, ma per ora dimentichiamoci. Il tela l'elemento è il volto pubblico di questa nuova fantastica funzionalità del browser.
Usando il tela l'elemento è morto facile; è un semplice tag HTML, con larghezza e altezza definite.
Questo non fa ancora molto In effetti, tutto ciò che fa è inserire una tela trasparente sulla tua pagina. Il contenuto all'interno del tela l'elemento è il contenuto di riserva, che verrà visualizzato solo se un browser non supporta la tela.
Il supporto del browser per la tela è piuttosto sorprendente.
È importante sottolineare che il supporto del browser per la tela è piuttosto sorprendente. Ogni browser moderno lo supporta, incluso l'ultimo Internet Explorer.
È interessante notare che è possibile utilizzare alcune funzionalità di tela in Internet Explorer versione 8 e successive, tramite il plugin ExplorerCanvas.
Una lezione fondamentale che ho imparato con la tela è che devi impostare in modo esplicito il file larghezza e altezza attributi del tela elemento quando si definiscono le sue dimensioni. L'uso di CSS per impostare la larghezza e l'altezza farà sì che il canvas aumenti gradualmente (o diminuisca) a quella dimensione. C'è una ragione logica dietro questo; ha a che fare con il tela elemento è un contenitore per qualcosa chiamato contesto di rendering 2D. Tuttavia, è solo importante sapere che l'uso di CSS per impostare le dimensioni della tela avrà un effetto strano.
Ho menzionato nell'ultima sezione che il tela l'elemento è solo la metà della storia. L'altra metà è il contesto di rendering 2D; la parte di tela che ti permette di fare cose interessanti che puoi effettivamente vedere.
Lascia che ti chiarisca una cosa: quando usi la tela, non stai disegnando sul tela elemento stesso. Invece, stai effettivamente disegnando sul contesto di rendering 2D, a cui stai accedendo attraverso il tela elemento tramite l'API JavaScript. Non ha molta importanza nel grande schema delle cose, ma è utile saperlo.
Se hai già utilizzato linguaggi di programmazione grafica 2d (ActionScript, Processing, ecc.), Saprai tutto sui sistemi di coordinate basati sullo schermo. Il contesto di rendering 2D nella tela non è diverso; utilizza un sistema di coordinate cartesiano standard, con il punto di origine (0, 0) in alto a sinistra. Lo spostamento verso destra aumenterà il valore di X asse, mentre spostandosi verso il basso aumenterà il valore del y asse. È piuttosto semplice.
Un'unità nel sistema di coordinate è uguale a un pixel sullo schermo (nella maggior parte dei casi).
Per utilizzare effettivamente il contesto di rendering 2d, è necessario utilizzare l'API JavaScript. La parte dell'API che si desidera utilizzare è getContext metodo, così:
Tela da zero
Nota: stai usando jQuery qui, ma solo per verificare quando il DOM è pronto. Sentiti libero di utilizzare la tua libreria JavaScript preferita, oppure inserisci il codice nella parte inferiore del documento.
Come risultato della chiamata getContext, il CTX la variabile conterrà ora un riferimento al contesto di rendering 2d. Ciò significa che ora hai tutto a posto per iniziare effettivamente a disegnare sulla tela. La parte divertente!
Ora che hai accesso al contesto di rendering 2D, puoi iniziare a chiamare i metodi di disegno dell'API. Uno dei più basilari è fillRect, che disegna un rettangolo riempito con un colore particolare (nero di default).
Aggiungi il seguente codice sotto il CTX variabile da precedente:
ctx.fillRect (50, 50, 100, 100);
Questo disegnerà un quadrato nero che si trova leggermente lontano dai bordi sinistro e superiore della tela, in questo modo:
Hai appena disegnato la tua prima forma utilizzando la tela HTML5. Si sente bene, giusto?
Nota: Noterai che stai utilizzando il metodo rettangolo dell'API JavaScript per disegnare quadrati. Questo perché non ci sono metodi in canvas per disegnare direttamente i quadrati, semplici perché quadrati siamo rettangoli (hanno quattro lati con angoli retti tra loro).
Ci sono quattro argomenti in una chiamata a fillRect:
Scritto è pseudocodice, fillRect sarebbe simile a questo:
ctx.fillRect (x, y, larghezza, altezza);
La cosa bella è che non sei limitato a solo rettangoli pieni. No. Puoi anche disegnare rettangoli accarezzati; cioè, rettangoli con un contorno attorno a loro. Per quello puoi usare il strokeRect metodo dell'API JavaScript, in questo modo:
ctx.strokeRect (50, 50, 100, 100);
Usa esattamente gli stessi argomenti di fillRect, e il risultato sarà un bel contorno di un quadrato:
Semplice. Elegante. Facile. Questo riassume davvero la tela. Tutti i metodi sono semplici se guardati individualmente, ma se usati insieme ti permettono di disegnare cose meravigliose.
A parte i rettangoli (le uniche forme che possono essere disegnate con un singolo metodo API), hai dei percorsi. I percorsi ti consentono di disegnare linee, sia diritte che curve, che possono essere combinate per creare forme piuttosto complesse.
Disegnare un percorso semplice richiede l'utilizzo di alcuni nuovi metodi API:
Accentsconagua
BeginPath inizia un nuovo percorso.moveTo sposta il punto dal quale viene tracciato il percorso.lineTo disegna un percorso rettilineo fino a questo punto dal punto definito in moveTo o dal punto dall'ultima chiamata a lineTo.closePath chiude il percorso collegando l'ultimo punto al punto di partenza.riempire riempie il percorso con un colore.ictus delinea il percorso.Prova il seguente codice:
ctx.beginPath (); ctx.moveTo (50, 50); ctx.lineTo (50, 250); ctx.lineTo (250, 250); ctx.closePath (); ctx.fill ();
Che disegnerà un tracciato triangolare e lo riempirà:
Puoi usare lo stesso concetto per disegnare qualsiasi altra forma che desideri. Il secondo articolo di questa serie riguarderà percorsi più avanzati nella tela, come gli archi (per creare cerchi) e i tracciati di Bezier (per creare linee curvilinee).
La cosa importante da ricordare adesso è che i percorsi sono praticamente l'unico modo per disegnare qualcosa di più complicato di un rettangolo.
Finora, tutto ciò che hai disegnato è stato riempito o accarezzato in nero. Che emozione! Fortunatamente ci sono un paio di proprietà all'interno dell'API JavaScript che ti permettono di cambiare il colore delle forme che stai disegnando. Queste proprietà sono fillStyle e strokeStyle.
Sono entrambi abbastanza auto-esplicativi, quindi saltiamo dentro e cambiamo il colore di riempimento di un rettangolo:
ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (50, 50, 100, 100);
Questo ti darà un bel quadrato rosso, così:
Oppure puoi cambiare il colore di stoke di un rettangolo:
ctx.strokeStyle = "rgb (255, 0, 0)"; ctx.strokeRect (50, 50, 100, 100);
Che ti darà un quadrato con un contorno rosso:
La bellezza di fillStyle e strokeStyle è che entrambi accettano valori di colore CSS normali. Ciò significa che puoi utilizzare RGB, RGBA, HSA, parole di colore (ad esempio "rosso") e valori esadecimali.
Vale la pena indicare che la modifica del colore nella tela non influirà su ciò che è già stato disegnato. Ad esempio, se disegni un rettangolo nero, modifica lo stile di riempimento in rosso, quindi disegna un altro rettangolo; il primo rettangolo sarà ancora nero.
Oltre a cambiare colore, puoi anche modificare la larghezza di un contorno tratteggiato. Per fare questo puoi usare il larghezza della linea proprietà dell'API JavaScript.
Usando il codice dell'esempio precedente, puoi modificare la larghezza del contorno:
ctx.lineWidth = 20; ctx.strokeStyle = "rgb (255, 0, 0)"; ctx.strokeRect (50, 50, 100, 100);
Che ti darà un colpo rosso bello e grosso:
Lo stesso concetto funziona anche per i percorsi. Ad esempio, puoi cambiare il triangolo da prima per avere uno schema più spesso:
ctx.lineWidth = 20; ctx.beginPath (); ctx.moveTo (50, 50); ctx.lineTo (50, 250); ctx.lineTo (250, 250); ctx.closePath (); ctx.stroke ();
Quale ti darà un triangolo grosso incredibilmente eccitante:
Ci sono anche alcune altre caratteristiche dell'API JavaScript che ti permettono di cambiare il modo in cui le linee vengono disegnate. Per esempio, Linecap cambia il modo in cui appare la fine di una linea e lineJoin cambia il modo in cui gli angoli di una linea appaiono. Dovresti assolutamente verificare queste caratteristiche (e altro) nelle specifiche del canvas.
L'ultima cosa che voglio insegnarti è come cancellare la tela. Hai imparato a disegnare forme, ma non a come eliminarle davvero, il che può essere davvero dannatamente utile.
Fortunatamente, cancellare la tela è facile; hai solo bisogno di un metodo dall'API JavaScript. Questo metodo è clearRect, e il suo compito è quello di rendere trasparente ogni pixel all'interno del rettangolo.
In questo articolo, la tela è larga 500 pixel e alta 500 pixel, quindi è possibile cancellare facilmente l'intero quadro chiamando clearRect così:
ctx.fillRect (50, 50, 100, 100); ctx.clearRect (0, 0, 500, 500);
È inutile mostrarti uno screenshot di questo, perché se funzionasse dovresti assolutamente non vedere nulla. Il rettangolo pieno viene effettivamente disegnato, ma in seguito viene cancellato immediatamente, in modo da non vederlo.
Nota: Gli argomenti in clearRect sono gli stessi di fillRect; X, y, larghezza e altezza.
Se non sei sicuro della larghezza e dell'altezza della tela, puoi anche cancellarla in questo modo:
ctx.clearRect (0, 0, canvas.width, canvas.height);
Questo usa il larghezza e altezza proprietà del tela elemento stesso, che è incredibilmente utile e un modo molto migliore di fare le cose.
Non devi cancellare l'intera tela se non vuoi. Invece puoi facilmente cancellare solo una piccola porzione. Ad esempio, immagina di avere un quadrato nero disegnato accanto a un quadrato rosso:
ctx.fillRect (50, 50, 100, 100); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (200, 50, 100, 100);
Normalmente sarebbe simile a questo:
È possibile cancellare il quadrato nero e lasciare intatto il quadrato rosso aggiungendo una chiamata clearRect sotto:
ctx.clearRect (50, 50, 100, 100);
Nota come questa chiamata a clearRect definisce una posizione e una dimensione uguale al quadrato nero. Questo in pratica significa che cambierà solo i pixel nell'area del quadrato in nero trasparente (cancellandoli):
Abbastanza elegante, non è vero? Cancellare la tela non è qualcosa che userai molto con i disegni statici, ma è qualcosa che userai molto quando imparerai come animare più avanti in questa serie.
La tela è facile da usare, veloce da imparare e potente quando la spinge al limite.
Quindi, come spero tu possa vedere, la tela è una parte del browser particolarmente potente. Ti permette di creare grafica, usando il codice e senza usare un singolo plugin. È facile da usare, è veloce da imparare ed è davvero potente quando lo spingi al limite.
Nel prossimo articolo, vedrete alcune delle funzionalità più avanzate del canvas, come disegnare cerchi, percorsi curvi e qualcosa chiamato lo stato del disegno. E se ciò non bastasse, più avanti nella serie vedrai come trasformare i disegni (come la rotazione e la scala), come manipolare le immagini e terminare con uno sguardo su come animare. Sarà roba molto eccitante, fidati di me.
Per ora, spero di averti dato abbastanza per stuzzicare l'appetito per la tela e uscire e saperne di più. La tela è una tecnologia fantastica che vale davvero la pena di capire, anche se non hai intenzione di usarla subito.
