Tela in html | Spiegato con esempi

Tela in html | Spiegato con esempi
In html, Il tag può essere utilizzato per disegnare la grafica sui siti Web. La tela funge da contenitore per la grafica e per disegnare la grafica utilizziamo uno script come JavaScript. Pertanto, nel DEVE essere utilizzato un attributo ID che fa riferimento a Elemento al JavaScript. Può essere usato per disegnare grafica, immagini, animazioni, ecc. Questo articolo presenta una guida completa per il Tag con l'aiuto di alcuni frammenti di codice.

In questo articolo impareremo i seguenti concetti relativi al etichetta:

  • Nozioni di base del tag
  • Come creare elemento
  • Come usare la tela con JavaScript
  • Come disegnare forme di base su tela

Iniziamo!

Nozioni di base del tag

Sono necessari un ID, altezza e larghezza degli attributi. L'attributo ID viene utilizzato per fare riferimento alla tela in JavaScript mentre gli attributi di altezza e larghezza determinano la dimensione della tela. Su un singolo documento HMTL, possiamo avere diversi tag.

Come creare elemento

Consideriamo lo snippet di seguito per capire come creare un elemento di tela:

Qui, ID = tela che verrà utilizzata nello script per trovare gli attributi dell'elemento tela, della larghezza e dell'altezza impostare la larghezza e l'altezza della tela come attributo 250px e lo stile viene utilizzato per modellare l'elemento tela.

Come usare la tela con JavaScript

In questa sezione, forniremo una guida passo-passo per l'utilizzo dell'elemento con JavaScript. Dobbiamo seguire i passaggi di seguito per procedere:

In primo luogo dobbiamo ottenere l'elemento e per questo scopo "GetElemenD ()" Il metodo verrà utilizzato come mostrato nello snippet di codice seguente:

Successivamente, creeremo un oggetto da disegno usando un oggetto Buil-in "GetContext ()" E all'interno di questo oggetto, specificheremo una dimensione come la bidimensionale come mostrato nella figura seguente:

var objcontext = can.getContext ("2D");

Il passaggio finale è attingere alla tela, specificheremo un "Fillstyle" Proprietà per impostare un colore per il disegno:

objcontext.FillStyle = 'Grey';

Come disegnare forme di base su tela

Questa sezione elaborerà come disegnare un rettangolo, una linea e un cerchio su tela:

Rettangolo

Per disegnare un rettangolo sulla tela, utilizzeremo un metodo FillRect (). Ci vorranno quattro valori: prima per la coordinata X, seconda per Y-coordinate, terzo per la larghezza e quarto per l'altezza.

objcontext.fillect (10,10.175,85);

Ecco il nostro frammento di codice completo per disegnare un rettangolo su tela:




Per il codice sopra, otterremo il seguente output:

Mentre specifichiamo lo spazio 10px per x, Y coordina in modo che nell'output lo spazio intorno alla parte superiore e sinistro verifica che il nostro codice funzioni correttamente.

Linea

Ora consideriamo un altro semplice esempio per capire come tracciare una linea su una tela. Utilizziamo il moveTo () E Lineto () metodo per specificare rispettivamente i punti iniziali e finali della linea. Per disegnare la linea dobbiamo usare un metodo colpo() metodo:




Durante l'esecuzione riuscita del codice otterremo il seguente output:

Una linea viene disegnata sulla tela a partire da (0, 0) e termina a (250, 150).

Cerchio

Per disegnare un cerchio, utilizzeremo BeginPath () E arco() metodi per iniziare un percorso e creare un cerchio rispettivamente. Il metodo ARC prenderà i valori per le coordinate x, y, il raggio del cerchio, l'angolo di inizio e l'angolo di fine.




Matematica.La proprietà PI viene utilizzata come endpoint del cerchio e quanto segue sarà l'output:

In questa sezione, abbiamo imparato a disegnare forme di base su tela come una linea, un cerchio e un rettangolo.

Conclusione

IL Il tag viene utilizzato per disegnare grafica sui siti Web usando JavaScript e per disegnare una forma su tela sono necessarie quattro passaggi essenziali.e. Crea la tua tela, prendi l'elemento di tela usando un metodo build-in "getElementById ()", Crea il tuo oggetto usando getContext () oggetto e infine disegnare le forme sulla tela. La prima metà di questo articolo è stata.