Esercitazione su tela HTML
L'elemento HTML <canvas> viene utilizzato per disegnare grafici su una pagina web.
Il grafico sopra viene creato con <canvas>.
Mostra quattro elementi: un rettangolo rosso, un rettangolo sfumato, un rettangolo multicolore e un testo multicolore.
Cos'è la tela HTML?
L'elemento HTML <canvas> viene utilizzato per disegnare grafici, al volo, tramite script (di solito JavaScript).
L'elemento <canvas> è solo un contenitore per la grafica. È necessario utilizzare uno script per disegnare effettivamente la grafica.
Canvas ha diversi metodi per disegnare percorsi, riquadri, cerchi, testo e aggiungere immagini.
Supporto del browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'elemento <canvas>.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas può disegnare testo
La tela può disegnare testo colorato, con o senza animazione.
HTML Canvas può disegnare grafica
Canvas ha ottime funzionalità per la presentazione grafica dei dati con immagini di grafici e diagrammi.
La tela HTML può essere animata
Gli oggetti della tela possono muoversi. Tutto è possibile: dalle semplici palline che rimbalzano alle animazioni complesse.
HTML Canvas può essere interattivo
Canvas può rispondere agli eventi JavaScript.
Canvas può rispondere a qualsiasi azione dell'utente (clic dei tasti, clic del mouse, clic dei pulsanti, movimento del dito).
HTML Canvas può essere utilizzato nei giochi
I metodi di Canvas per le animazioni offrono molte possibilità per le applicazioni di gioco HTML.
Esempio di tela
In HTML, un elemento <canvas> ha il seguente aspetto:
<canvas id="myCanvas" width="200" height="100"></canvas>
L'elemento <canvas> deve avere un attributo id in modo che possa essere referenziato da JavaScript.
L'attributo larghezza e altezza è necessario per definire la dimensione della tela.
Suggerimento: puoi avere più elementi <canvas> su una pagina HTML.
Per impostazione predefinita, l'elemento <canvas> non ha bordo né contenuto.
Per aggiungere un bordo, utilizza un attributo di stile:
Esempio
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;"></canvas>
I prossimi capitoli mostrano come disegnare sulla tela.