Sommario
Quando si utilizza l'oggetto tela per disegnare non ci limitiamo a disegnare figure rettangolari, possiamo anche disegnare usando le coordinate e il cosiddetto percorsi quali sono i percorsi attraverso i quali indicheremo l'elemento tela dove e come mostrare il nostro disegno.Le possibilità che questo ci offre sono impressionanti, perché con gli algoritmi necessari possiamo realizzare composizioni illimitate, disegnare qualsiasi tipo di figura in HTML5 e con essa fino a raggiungere in concomitanza con altri elementi risultati mai immaginati nelle precedenti specificazioni del linguaggio.
Utilizzo del percorso
Come abbiamo detto il il percorso è ciò che ci permetterà di indicare alla tela le coordinate con cui dovrebbe essere fatto il disegno, con queste coordinate la tela sarà in grado di sapere dove disegnare le linee corrispondenti e alla fine con il corretto accumulo di linee possiamo ottenere qualsiasi tipo di figura.
Prima di passare agli esempi corrispondenti, dobbiamo sapere quali metodi sono disponibili per l'elemento canvas e il percorso, vediamo il seguente elenco:
- inizioPercorso(): Questo metodo ci permette di iniziare un nuovo percorso.
- chiudiPercorso(): Questo metodo tenta di chiudere il percorso corrente disegnando una linea dalla fine dell'ultima riga alle coordinate iniziali.
- riempire (): Compilare i moduli descritti dai sottopercorsi.
- isPointInPath (x, y): Restituisce vero se il punto specificato è contenuto all'interno della forma disegnata dal percorso corrente.
- rigaTo (x, y): Disegna un sottotraccia alle coordinate specificate.
- moveTo (x, y): Ci consente di spostarci alle coordinate specificate senza dover disegnare un sottopercorso.
- retto (x, y, w, h): Disegna un rettangolo le cui coordinate nell'angolo in alto a sinistra corrispondono a (x, y) la sua larghezza corrisponde a w e la sua altezza corrisponde a h.
- ictus (): Disegna le linee esterne delle forme disegnate dal sottotracciato.
• Chiamiamo il metodo inizioPercorso.
• Ci spostiamo nella posizione iniziale utilizzando il metodo moveTo.
• Disegniamo i sottopercorsi con i metodi lineTo, eccetera.
• Facoltativamente possiamo chiamare il metodo chiudiPercorso.
• Infine chiamiamo i metodi riempire o stoke.
Abbiamo già l'ordine consigliato per iniziare a disegnare ora vediamo il codice corrispondente in HTML5.
Esempio Il tuo browser non supporta l'elemento tela Come possiamo vedere, vengono effettuate due chiamate a inizioPercorso(), con questo possiamo iniziare a disegnare le aree sulla tela poi con moveTo () stabiliamo le posizioni iniziali e il resto è disegnare.
Vediamo come appare il nostro disegno nel browser:
