HTML5 - Disegnare sulla tela

La chiave per avere strutture forti sono le fondamenta, per questo dobbiamo avere delle fondamenta forti e ben definite, quindi per poter utilizzare l'elemento alla sua massima capacità Tela Per prima cosa dobbiamo conoscere a fondo gli aspetti di base ed è per questo che inizieremo a disegnare forme di base, con questo impareremo come funzionano i diversi metodi di disegno e quindi potremo creare composizioni più complesse.
Disegna un rettangolo
Il rettangolo è una figura molto semplice che si compone di 4 lati, vediamo i metodi che abbiamo a disposizione per poterlo disegnare sulla Tela:

• clearRect (x, y, w, h): Pulisce un rettangolo o una parte di un rettangolo specificato in precedenza.
• fillRect (x, y, w, h): Usato per disegnare un rettangolo pieno.
• strokeRect (x, y, w, h): Utilizzato per disegnare un rettangolo senza riempimento.

Come avremo notato, i metodi precedenti utilizzano tutti 4 argomenti, questi argomenti corrispondono a quanto segue:

• x e sono i limiti del bordo superiore sinistro del rettangolo.
• ns corrispondono rispettivamente alla larghezza e all'altezza.

Vediamo un semplice esempio in modo da poter mettere in pratica questi elementi:

 Esempio Il tuo browser non supporta l'elemento tela 

In questo esempio vediamo che definiamo alcune variabili, dove diciamo il compensare o limite dove inizieranno i rettangoli, la dimensione e poi un conteggio var che servirà da contatore per fare le ripetizioni, quindi vediamo nella prossima sezione sappiamo che faremo rettangoli dinamicamente, vediamo come sono disegnati nel nostro navigatore:

Abbiamo fatto due righe di 5 rettangoli ciascuna, se osserviamo il codice che avevamo chiamato i metodi fillRect() prima per i rettangoli pieni e poi per corsaRect per quelli non farciti.
Utilizzando il metodo clearRect()
E se ora volessimo pulire una parte dei rettangoli pieni? Per questo abbiamo il metodo clearRect(), nel codice seguente vedremo come funziona:

 Esempio Il tuo browser non supporta l'elemento tela 

Per ogni ripetizione applichiamo una chiamata al metodo clearRect() e quando abbiamo fatto l'algoritmo lo abbiamo fatto passare attraverso l'intero centro dei rettangoli pieni, vediamo nell'immagine seguente come appare nel nostro browser:

Qui possiamo vedere come abbiamo pulito un'area che avevamo precedentemente disegnato.
Con questo finiamo questo tutorial in cui siamo stati in grado di vedere un po' più in profondità alcuni metodi che possiamo usare per disegnare nel nostro elemento Tela.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo