Introduzione al lavoro con la tela

Oggi imparerai a conoscere una tecnologia web conosciuta come Canvas e il modo in cui è correlata al modello a oggetti del documento, comunemente indicato come DOM. Questa tecnologia è tremendamente potente in quanto consente agli sviluppatori web di accedere e modificare elementi HTML attraverso l'uso di JavaScript.

Ora potresti chiederti perché dobbiamo anche preoccuparci di JavaScript. Per dirla semplicemente, HTML e JavaScript sono reciproci e interdipendenti. Alcuni componenti HTML, come ad esempio tela elemento, non sono nulla senza l'uso di JavaScript. Dopotutto, a che serve una tela se non possiamo disegnarla?

Per comprendere il concetto, ho pensato che avremmo potuto lavorare insieme ad un progetto di esempio in cui tentassimo di disegnare una semplice faccina sorridente. Quindi tuffiamoci dentro.

Iniziare

Prima crea una nuova directory per conservare i file del tuo progetto, quindi vai avanti e apri il tuo editor di testo o lo strumento di sviluppo web preferito. Una volta che hai fatto, dovresti creare un vuoto index.html e un vuoto script.js, che continueremo a modificare mentre andiamo avanti.

Successivamente, passeremo a modificare il nostro index.html, che non dovrebbe richiedere molto tempo, poiché la maggior parte del nostro progetto sarà scritta in JavaScript. Tutto ciò che dobbiamo fare nel nostro HTML è creare un elemento canvas e un riferimento script.js. È piuttosto semplice:

Quindi, per spiegare, ho usato un set di tag per entrambi  e , e quindi, possiamo aggiungere più elementi al nostro documento attraverso il corpo. Cogliendo questa opportunità, faccio esattamente questo con un elemento canvas di 640 x 480 con l'attributo id = 'tela'.

Questo attributo allega semplicemente una stringa a un elemento ai fini dell'identificazione e lo useremo in seguito per individuare il nostro elemento canvas nel nostro file JavaScript. Ho quindi fatto riferimento al nostro file JavaScript utilizzando il > tag, in cui ho specificato JavaScript come tipo di lingua e script.js come il percorso del nostro file desiderato.

Manipolazione del DOM

Come suggerisce il nome del modello di oggetto del documento, avremo bisogno di utilizzare un'interfaccia per il documento HTML attraverso l'uso di un'altra lingua, in questo caso, JavaScript. Per questo, avremo bisogno di un breve primer sull'oggetto documentale integrato. Questo oggetto corrisponde direttamente al nostro tag, e allo stesso modo, è la base del nostro intero progetto, in quanto possiamo usarlo per ottenere elementi e apportare cambiamenti.

var canvas = document.getElementById ('canvas');

Ricorda come abbiamo definito un elemento canvas con il id = 'tela'? Ora lo stiamo prendendo dal documento HTML attraverso l'uso di document.getElementById metodo, in cui semplicemente passiamo la stringa corrispondente all'id dell'elemento desiderato. Ora che l'abbiamo afferrato, possiamo iniziare a usarlo per disegnare.

Per disegnare effettivamente con la tela, dobbiamo manipolare il suo contesto. Sorprendentemente, una tela non contiene metodi o attributi per il disegno, ma il suo oggetto contesto ha tutti i metodi di cui abbiamo bisogno. Un contesto è definito in questo modo:

var context = canvas.getContext ('2d');

Ogni tela ha alcuni contesti diversi e, ai fini del nostro programma, ci servirà solo quella bidimensionale. Questo contesto che abbiamo realizzato avrà tutti i metodi di disegno di cui avremo bisogno per creare il nostro volto.

Prima di iniziare, devo informarti che il contesto memorizza due colori come attributi, uno per il tratto e uno per il riempimento. Per la nostra faccina, dovremo impostare il riempimento in giallo e il tratto in nero.

context.fillStyle = 'giallo'; context.strokeStyle = 'nero';

Dopo aver impostato il contesto con i colori desiderati, dobbiamo effettivamente disegnare un cerchio per il viso. Sfortunatamente, il contesto non ha un metodo predefinito per le cerchie, quindi sarà necessario utilizzare il cosiddetto percorso. Un percorso è semplicemente una serie di linee e curve congiunte e questo percorso viene quindi chiuso quando il disegno è stato completato.

context.beginPath (); context.arc (320, 240, 200, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath ();

Quindi, per spiegare, abbiamo incaricato il contesto di iniziare un nuovo percorso. Successivamente, abbiamo creato un arco nel punto (320, 240) con un raggio di 200 pixel. Gli ultimi due argomenti specificano l'angolo iniziale e finale per costruire l'arco. Quindi passiamo 0 e 2 * radianti Math.PI per fare un giro completo. Infine, chiediamo al contesto di riempire e accarezzare il percorso in base ai colori che abbiamo impostato.

Anche se chiudere il percorso non è un requisito per la funzione della sceneggiatura, avremo bisogno di terminare il percorso in modo da poterne iniziare di nuovi per gli occhi e la bocca della nostra faccina sorridente. Gli occhi sono fatti esattamente allo stesso modo, ognuno con un raggio più piccolo e una posizione diversa. Ma prima dobbiamo ricordarci di impostare il colore di riempimento sul bianco.

context.fillStyle = 'bianco'; context.beginPath (); context.arc (270, 175, 30, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath (); context.beginPath (); context.arc (370, 175, 30, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath ();

E questo è tutto ciò che sta succedendo con gli occhi. Ora la bocca è molto simile, ma questa volta non riempiremo l'arco e la nostra angolazione sarà configurata come un semicerchio. Per fare ciò, dovremo impostare l'angolo iniziale su zero e l'angolo finale su -1 * Math.PI. E ricorda, non dimenticare di impostare il colore del tratto su rosso.

context.fillStyle = 'rosso'; context.beginPath (); context.arc (320, 240, 150, 0, -1 * Math.PI); context.fill () context.stroke (); context.closePath ();

Congratulazioni

Bel lavoro. Sei arrivato alla fine del tutorial e hai creato una faccina sorridente mentre imparavi molto di più su Canvas, HTML, JavaScript e il Document Object Model. Se hai qualche domanda, sentiti libero di lasciare un commento. Clicca qui per vedere il programma in azione.