Tutorial di HTML Canvas

L'elemento <canvas> HTML viene utilizzato per disegnare grafici su una pagina web.

Il grafico sopra è stato creato con <canvas>.

Mostra quattro elementi: rettangolo rosso, rettangolo con degradazione, rettangolo a più colori e testo a più colori.

Cos'è HTML Canvas?

L'elemento <canvas> HTML viene utilizzato per disegnare grafici dinamicamente tramite script (solitamente JavaScript).

L'elemento <canvas> è solo un contenitore per grafici. È necessario utilizzare script per disegnare grafici reali.

Il Canvas ha vari metodi per disegnare percorsi, rettangoli, cerchi, testo e aggiungere immagini.

HTML Canvas può disegnare testo

Il Canvas può disegnare testo a colori e può avere anche effetti animati.

HTML Canvas può disegnare grafici

Il Canvas ha la capacità di presentare dati grafici e diagrammi utilizzando grafici e immagini.

HTML Canvas può animarsi

L'oggetto Canvas può muoversi. Tutto è possibile: dai semplici palloni che saltano agli animazioni complesse.

HTML Canvas può essere interattivo

Il Canvas può rispondere agli eventi JavaScript.

Il Canvas può rispondere a qualsiasi azione dell'utente (clic del tasto, clic del mouse, clic del pulsante, movimento del dito).

HTML Canvas può essere utilizzato per i giochi

I metodi di animazione del Canvas offrono molte possibilità per le applicazioni di gioco HTML.

Esempio di Canvas

In HTML, l'elemento <canvas> appare così：

<canvas id="myCanvas" width="200" height="100"></canvas>

L'elemento <canvas> deve avere un attributo id per essere riferito dal JavaScript.

Gli attributi width e height sono necessari per definire la dimensione della canvas.

Suggerimento: una pagina HTML può avere più elementi <canvas>.

Per impostazione predefinita, l'elemento <canvas> non ha bordi né contenuto.

Per aggiungere un bordo, utilizzare l'attributo style：

Esempio

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Prova da solo

Le prossime sezioni illustreranno come disegnare su una canvas.

Vedi anche：

Manuale completo di Canvas su CodeW3C.com

Supporto dei browser

<canvas> è un elemento dello standard HTML5 (2014).

Tutti i browser moderni supportano <canvas>：