L'HTML <canvas> elemento viene utilizzato per disegnare elementi grafici in una pagina web.
Il grafico a sinistra è stato creato con <canvas> . Esso mostra quattro elementi: un rettangolo rosso, un rettangolo di pendenza, un rettangolo multicolore, ed un testo multicolore.
Cosa è l'HTML Canvas?
L'HTML <canvas> elemento viene utilizzato per disegnare elementi grafici, al volo, tramite scripting (usually JavaScript) .
Il <canvas> elemento è solo un contenitore per la grafica. È necessario utilizzare uno script per disegnare in realtà la grafica.
Tela ha diversi metodi per disegnare i percorsi, le scatole, cerchi, testo, e l'aggiunta di immagini.
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il <canvas> elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas può disegnare il testo
Tela può disegnare testo colorato, con o senza animazione.
HTML Canvas Can Draw Graphics
Tela ha grandi caratteristiche per la presentazione grafica dei dati con un immaginario di grafici e tabelle.
HTML Canvas può essere animato
oggetti di tela possono muoversi. Tutto è possibile: dalle semplici palline rimbalzanti per animazioni complesse.
HTML Canvas può essere interattiva
Canvas può rispondere a eventi JavaScript.
Tela in grado di rispondere a qualsiasi azione dell'utente (clic chiave, click del mouse, pulsanti, movimento delle dita).
HTML Canvas può essere utilizzato in Giochi
metodi di tela 'per le animazioni, offrono un sacco di possibilità per applicazioni di gioco HTML.
Tela Esempio
In HTML, un <canvas> elemento simile a questo:
<canvas id="myCanvas" width="200" height="100"></canvas>Il <canvas> elemento deve avere un attributo id in modo che possa essere indicato da JavaScript.
L'attributo larghezza e l'altezza è necessario definire le dimensioni della tela.
Tip: È possibile avere più <canvas> elementi in un'unica pagina HTML.
Per impostazione predefinita, il <canvas> elemento non ha frontiere e nessun contenuto.
Per aggiungere un bordo, utilizzare un attributo di stile:
Esempio
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Prova tu stesso " I prossimi capitoli mostrano come disegnare sulla tela.