HTML5 - Canvas

L'elemento HTML5 <canvas> ti offre un modo semplice e potente per disegnare grafica utilizzando JavaScript. Può essere utilizzato per disegnare grafici, creare composizioni fotografiche o fare animazioni semplici (e non così semplici).

Ecco un semplice elemento <canvas> che ha solo due attributi specifici width e height oltre a tutti gli attributi HTML5 principali come id, nome e classe, ecc.

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Puoi facilmente trovare l'elemento <canvas> nel DOM utilizzando il metodo getElementById () come segue:

var canvas = document.getElementById("mycanvas");

Vediamo un semplice esempio sull'utilizzo dell'elemento <canvas> nel documento HTML5.

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

Questo produrrà il seguente risultato:

Il contesto di rendering

La <canvas> è inizialmente vuota e per visualizzare qualcosa, uno script deve prima accedere al contesto di rendering e disegnarci sopra.

L'elemento canvas ha un metodo DOM chiamato getContext, utilizzato per ottenere il contesto di rendering e le sue funzioni di disegno. Questa funzione accetta un parametro, il tipo di contesto2d.

Di seguito è riportato il codice per ottenere il contesto richiesto insieme a un controllo se il tuo browser supporta l'elemento <canvas> -

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

Supporto browser

Le ultime versioni di Firefox, Safari, Chrome e Opera supportano tutte HTML5 Canvas ma IE8 non supporta nativamente canvas.

È possibile utilizzare ExplorerCanvas per avere il supporto della tela tramite Internet Explorer. Devi solo includere questo JavaScript come segue:

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

Esempi di canvas HTML5

Questo tutorial copre i seguenti esempi relativi all'elemento <canvas> HTML5.

Sr.No.	Esempi e descrizione
1	Rettangoli di disegno Scopri come disegnare un rettangolo utilizzando l'elemento <canvas> HTML5
2	Tracciati di disegno Scopri come creare forme utilizzando i percorsi nell'elemento <canvas> HTML5
3	Linee di disegno Impara a disegnare linee utilizzando l'elemento <canvas> HTML5
4	Disegno di Bezier Scopri come disegnare la curva di Bézier utilizzando l'elemento <canvas> HTML5
5	Disegno quadratico Scopri come disegnare una curva quadratica utilizzando l'elemento <canvas> HTML5
6	Utilizzo delle immagini Scopri come utilizzare le immagini con l'elemento <canvas> HTML5
7	Crea sfumature Scopri come creare sfumature utilizzando l'elemento <canvas> HTML5
8	Stili e colori Scopri come applicare stili e colori utilizzando l'elemento <canvas> HTML5
9	Testo e caratteri Impara a disegnare un testo straordinario utilizzando caratteri diversi e le loro dimensioni.
10	Motivo e ombra Impara a disegnare diversi modelli e ombre esterne.
11	Stati della tela Scopri come salvare e ripristinare gli stati della tela mentre esegui disegni complessi su una tela.
12	Traduzione della tela Questo metodo viene utilizzato per spostare la tela e la sua origine in un punto diverso della griglia.
13	Rotazione della tela Questo metodo viene utilizzato per ruotare la tela attorno all'origine corrente.
14	Ridimensionamento della tela Questo metodo viene utilizzato per aumentare o diminuire le unità in una griglia canvas.
15	Trasformazione tela Questi metodi consentono modifiche direttamente alla matrice di trasformazione.
16	Composizione della tela Questo metodo viene utilizzato per mascherare alcune aree o eliminare sezioni dalla tela.
17	Animazione su tela Scopri come creare un'animazione di base utilizzando la tela HTML5 e JavaScript.