Sommario
Con i diversi metodi di disegno visti nel tela È possibile definire delle aree al loro interno da disegnare, anche se questo è un po' più complesso è del tutto fattibile, tuttavia abbiamo anche la possibilità di ottenere lo stesso risultato usando il metodo clip().Un altro aspetto che può essere incorporato anche nel la tela è il disegno del testo, forse pensiamo che usando i CSS e altri elementi possiamo disegnare un testo uguale o più bello, pur essendo nella tela ci permette di applicare animazioni native in HTML5.
Metodo di clip
Come accennato all'inizio, questo metodo semplifica il modo per come possiamo creare una sezione all'interno di una tela?, per poter introdurre altri elementi disegnati, come un nuovo disegno o riempirlo con un colore specifico.
Per utilizzare questo strumento dobbiamo chiamare il metodo clip (), ciò che fa questo metodo è creare una regione di ritaglio o una nuova sezione, vediamo nel codice seguente come funziona:
Esempio Il tuo browser non supporta l'elemento tela In questo codice prima disegniamo un grande rettangolo in giallo, poi creiamo una nuova regione al suo interno usando il tasto metodo clip() e all'interno di questa regione generiamo un nuovo rettangolo rosso.
Vediamo come appare nel nostro browser:
Possiamo anche disegnare del testo all'interno di una tela, per questo abbiamo i seguenti metodi:
fillText (, x, y, larghezza): Disegna e riempie il testo specificato nel primo parametro in posizione (x, y). Inoltre, il suo argomento larghezza è facoltativo ma quando dichiarato pone un limite alla larghezza del testo.
strokeText (, x, y, larghezza): Disegna e lascia il testo senza riempimento nella posizione (x, y). Come il metodo precedente nel suo argomento opzionale limita la larghezza del testo.
Vediamo il seguente esempio di come utilizzare questi metodi per disegnare del testo sulla nostra tela:
Esempio Il tuo browser non supporta l'elemento tela In questo codice utilizziamo entrambi i metodi per disegnare lo stesso testo, entrambi nella stessa posizione ma con un colore diverso con cui otteniamo un effetto di cornice esterna di un colore e un riempimento di un altro colore, con questo possiamo stabilire un più marcata differenza tra fillText sì trattoTesto.
Infine e per finire questo tutorial vediamo come appare nel browser.
