Tela JavaScript
Questo articolo ti riconoscerà
- Cos'è una tela
- Come attivare una tela usando JavaScript
- Come ridimensionare una tela usando JavaScript
- Come creare forme su una tela usando JavaScript
Cos'è una tela
La tela è un contenitore, che ci consente di disegnare forme, linee e testi diverse in un browser. Per impostazione predefinita, il contenitore di tela è invisibile e non ha confine. Quindi, per renderlo visibile, utilizziamo il tag di tela HTML 5 e la proprietà del bordo CSS.
Sintassi:
La sintassi sopra visualizza solo un semplice contenitore con un bordo.
Come attivare una tela usando JavaScript
Fondamentalmente Canvas è un tag HTML 5 ma è operativo solo con l'aiuto di un JavaScript. Il seguente codice è obbligatorio per accedere e attivare una tela.
Codice:
const canvas = document.QuerySelector ("#Canvas");const contxt = tela.getContext ("2D");
In questo codice, utilizziamo il metodo QuerySelector () per ottenere l'ID Canvas che collegherà il nostro codice JavaScript con il tag Canvas. Quindi utilizziamo il metodo getContext () per specificare l'ambiente di una tela (2D o 3D).
Come ridimensionare una tela usando JavaScript
Usiamo il codice JavaScript per fornire proprietà di altezza e larghezza degli oggetti Canvas. Se utilizziamo CSS per dare altezza e larghezza al contenitore di tela, pixelare il contenitore anziché ridimensionarlo. Quindi usa il seguente codice JavaScript per ridimensionare il contenitore di tela.
Sintassi:
tela.altezza = 200;tela.larghezza = 400;
Come creare forme su tela usando JavaScript
Ora vedremo come possiamo creare forme diverse su tela usando JavaScript.
Rettangolo
Il seguente codice JavaScript viene utilizzato per creare un rettangolo sulla tela.
Sintassi:
variabile_name.StrokerTect (value_x, value_y, larghezza, altezza)Qui il nome della variabile rappresenta la variabile che abbiamo creato per il metodo getContext (). Mentre il metodo StrockRect () richiede quattro parametri in cui il valore x e il valore y rappresentano la posizione sulla tela in cui si desidera disegnare la forma (rettangolo). Considerando che la larghezza e l'altezza sono usate per menzionare le dimensioni del rettangolo.
Codice:
ContTT.StrokerTect (50,50.250.100)In questo codice, un rettangolo viene creato con larghezza 250px e altezza 100px.
Produzione:
Nel caso in cui si desideri modificare il colore del rettangolo, aggiungi il seguente codice prima del codice di creazione del rettangolo:
Codice:
ContTT.Strokestyle = "blu";Produzione:
Rettangolo pieno
Il seguente codice JavaScript viene utilizzato per creare un rettangolo pieno sulla tela.
Sintassi:
variabile_name.FillRect (value_x, value_y, larghezza, altezza)Il metodo FillRect () prende anche i quattro parametri e viene utilizzato per creare un rettangolo pieno.
Codice:
ContTT.FILLRECT (50,50.250.100)Produzione:
Per cambiare il colore del rettangolo, utilizzare la proprietà FillStyle prima del codice di creazione del rettangolo:
Codice:
ContTT.FillStyle = "Aqua";Produzione:
Cerchio
Il seguente codice JavaScript viene utilizzato per creare un cerchio sulla tela.
Sintassi:
variabile_name.arco (valore-x, valore-y, radius circolare, angolo di avvio, angolo finale);variabile_name.colpo();
Qui il metodo arc () assume cinque parametri tra cui il valore x e il valore y che rappresentano la posizione del cerchio, il raggio del cerchio, l'angolo di partenza e il valore dell'angolo finale. Il metodo ictus () viene utilizzato disegnare un percorso del cerchio che alla fine visualizzerà un cerchio.
Codice:
ContTT.arco (180, 100, 80, 0, 2 * matematica.PI);ContTT.colpo();
Produzione:
Linea
Il seguente codice JavaScript viene utilizzato per creare una riga sulla tela.
Sintassi:
variabile_name.inizioPath ();variabile_name.moveto (valore-x, valore-y);
variabile_name.lineto (punto di partenza, punto finale);
variabile_name.colpo();
In questa sintassi,
Il metodo BeginPath () inizia un percorso,
Il metodo MoveTo () prende due valori xey che sposta il cursore nel punto specifico.
Il metodo Lineto () prende anche due valori, il punto di partenza da dove inizia e il punto finale della linea in cui la linea termina.
Il metodo ictus () viene utilizzato per disegnare un percorso della linea che alla fine visualizzerà una linea.
Codice:
ContTT.inizioPath ();ContTT.Moveto (50,50);
ContTT.Lineto (300.150);
ContTT.colpo();
Produzione:
Testo
Il seguente codice JavaScript viene utilizzato per scrivere un testo sulla tela.
Sintassi:
variabile_name.font = "Font-Family-Family";nome variabile.FillStyle = "Color";
nome variabile.FillText ("Visualing-text", value-x, value-y);
Innanzitutto, devi menzionare le dimensioni del carattere e la famiglia dei caratteri utilizzando la proprietà del carattere. In secondo luogo, fornire il colore se si desidera utilizzare la proprietà FillStyle. Infine, il metodo FillText () prende tre valori, testo, valore x e valore y.
Codice:
ContTT.font = "50px Arial";ContTT.FillStyle = "LightGreen";
ContTT.FillText ("Canvas", 110, 120)
Produzione:
Testo vuoto
Il seguente codice JavaScript viene utilizzato per scrivere un testo vuoto sulla tela.
Sintassi:
variabile_name.font = "Font-Family-Family";nome variabile.Strokestyle = "Color";
nome variabile.strokeText ("Visualing-text", value-x, value-y);
Qui il metodo StrokeText () viene utilizzato per scrivere il testo in stile vuoto ..
Codice:
ContTT.font = "50px Arial";ContTT.Strokestyle = "Orange";
ContTT.StrokeText ("Canvas", 110, 120)
Produzione:
Conclusione
Canvas è una tavola artistica per disegnare grafica 2D o 3D su un browser. In questo articolo abbiamo imparato come possiamo disegnare un cerchio, un rettangolo, una linea e un testo su una tela attraverso JavaScript. Sebbene Canvas sia un tag HTML5, ma le operazioni su tela possono essere eseguite solo con l'aiuto di un codice JavaScript.