Il tag canvas in HTML

Il tag canvas in HTML

Il tag <canvas> viene usato nel codice HTML per inserire figure e immagini in una pagina web disegnate tramite JavaScript, linguaggio di programmazione che serve proprio a rendere interattive delle pagine web o a modificarle mentre l’utente sta leggendo.

Lo JavaScript viene usato spesso per inserire il banner del consenso del trattamento dei dati personali, per inserire la pubblicità in un sito o per altri servizi. In questa guida viene data una panoramica a questo linguaggio di programmazione.

Per inserire un oggetto canvas nel file HTML bisogna innanzitutto crearlo. In questo caso viene sempre assegnato all’oggetto un attributo id, non una classe.

Come inserire un oggetto Canvas

Il codice da scrivere in un file HTML per inserire un elemento canvas è simile a questo:

<canvas id="Canva1">
Il tuo browser non è in grado di visualizzare l'oggetto
</canvas>

<script>
var canvas = document.getElementById("Canva1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "lightgreen";
ctx.fillRect(0, 0, 50, 50);
</script>

Tutto il codice va inserito all’interno dell’elemento body, dove viene inserito tutto ciò che vogliamo sia letto o visto dall’utente.

Dopo avere inserito il tag canvas e avergli assegnato un id, inseriremo il tag per lo JavaScript e al suo interno disegneremo la figura.

In questo caso, ci si è limitati a un quadrato. Innanzitutto, nella prima stringa abbiamo creato la variabile, una “scatola” che contiene l’oggetto da disegnare. Nella seconda stringa, stiamo indicando al programma che vogliamo disegnare un oggetto 2d; nella terza riga abbiamo scelto il colore del quadrato mentre nell’ultima riga abbiamo inserito le coordinate x e y, insieme alle misure della lunghezza e dell’altezza. Modificando i primi due numeri modifichiamo la posizione del riquadro che contiene l’oggetto Canvas mentre modificando gli ultimi due numeri modifichiamo rispettivamente la lunghezza e l’altezza.

L’immagine sotto mostra come apparirà il Canvas sul browser

canvas su browser
/ 5
Grazie per aver votato!