HTML: creare aree di disegno per JavaScript con il tag canvas
L’elemento HTML <canvas> ti permette di creare un’area che può essere riempita con grafici o animazioni tramite JavaScript. A questo scopo viene realizzato un oggetto di disegno 2D. Ricorrendo a diversi metodi per l’API del tag <canvas> si definisce poi il contenuto desiderato.
Cos’è il tag <canvas> HTML?
<canvas> HTML è un elemento che mette a disposizione un’area di disegno in cui puoi creare grafici o animazioni con JavaScript. L’area disponibile viene definita indicando l’altezza e la larghezza. Grazie al pratico tag HTML, questa area può essere inserita in qualsiasi parte di un documento HTML.
Il contenuto di questa “tela” (la traduzione in italiano di “canvas”) non è un vero e proprio componente di un sito web, motivo per cui non è possibile usare CSS o altri elementi HTML. Se il tag <canvas> HTML non è supportato da un browser, il contenuto sarà quindi visualizzato come fallback. I browser moderni prevedono comunque il supporto nativo di questo elemento.
- Disponibilità garantita al 99,99%
- Dominio, SSL ed e-mail inclusi
- Assistenza 24/7 in lingua italiana
Tag <canvas> HTML: la sintassi
Di per sé l’elemento <canvas> HTML non mette a disposizione strumenti di disegno, ma crea soltanto la cornice in cui puoi generare elementi grafici con JavaScript. La sintassi di base dell’elemento è la seguente:
<canvas id="CanvasEsempio" width="[valore in pixel]" height="[valore in pixel]"></canvas>Con id denomini l’elemento, con width e height gli assegni le dimensioni desiderate. Opzionalmente puoi usare altri parametri per specificare meglio la struttura della grafica.
Il funzionamento di <canvas> spiegato con un esempio semplice
Servendoti della sintassi sopra puoi creare un’area di disegno semplice. Nell’esempio di seguito, quest’area deve avere una lunghezza di 500 pixel e un’altezza di 250 pixel. Il codice si presenta così:
<!DOCTYPE html>
<html>
<body>
<h1>Esempio di canvas HTML</h1>
<canvas id="CanvasEsempio" width="500" height="250" style="border: 1px solid grey"></canvas>
</body>
</html>In questo modo però ottieni soltanto un’area libera. Solo con JavaScript puoi riempire l’elemento <canvas> HTML generato con forme, immagini, testi o gradienti e, se necessario, animare questi oggetti. I contenuti sono inseriti sotto forma di pixel in una bitmap, che successivamente può poi essere convertita in una grafica PNG.
Puoi usare l’elemento con getElementById(). Questo metodo funziona soltanto se all’area <canvas> hai assegnato un ID univoco. Se desideri disegnare nell’area definita, o interagire in altro modo al suo interno, devi creare un oggetto di disegno 2D. Per l’esempio sopra, puoi farlo usando il codice seguente:
const CanvasEsempio = document.getElementById("CanvasEsempio");
const ctx = CanvasEsempio.getContext("2d");A questo punto, tutto è pronto per usare l’elemento <canvas> HTML come tela da disegno. Con la funzione fillRect() possiamo ora collocare nell’area definita un rettangolo semplice, che deve essere mantenuto di color petrolio (in inglese: “teal”) e avere una larghezza di 200 pixel e un’altezza di 150 pixel. Collochiamolo a una distanza di 10 pixel dal bordo sinistro e di 50 pixel dal bordo superiore. Il codice si presenta come segue:
<!DOCTYPE html>
<html>
<body>
<h1>Esempio di canvas HTML</h1>
<canvas id="CanvasEsempio" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const CanvasEsempio = document.getElementById("CanvasEsempio");
const ctx = CanvasEsempio.getContext("2d");
ctx.fillStyle = "teal";
ctx.fillRect(10, 50, 200, 150);
</script>
</body>
</html>Per cosa si può usare <canvas> HTML?
Nell’esempio sopra abbiamo inserito un rettangolo semplice, ma con l’elemento <canvas> puoi realizzare anche forme molto più complesse. Ad esempio, archi, testi, trasparenze, gradienti di colore e grafici nei formati GIF, JPEG e PNG. Queste forme possono essere tagliate, scalate e posizionate a piacere. Mediante la funzione temporale di JavaScript è anche possibile realizzare animazioni all’interno di un tag <canvas> HTML.
Quali dimensioni può avere un elemento <canvas>?
Le dimensioni massime possibili per un <canvas> HTML variano a seconda del browser e dell’ambiente. Ad esempio per iOS il limite è 4096 x 4096 pixel, mentre altri sistemi consentono anche dimensioni superiori a 10.000 x 10.000 pixel. Tuttavia, siccome l’area dipende sempre dal rapporto d’aspetto, gli elementi sono responsive e quindi adatti per dispositivi diversi.
I metodi per le API di HTML <canvas> in breve
Abbiamo già descritto come si crea un oggetto del contesto 2D. Con uno di questi oggetti integrato tramite getContext("2d") puoi riempire l’area <canvas> in qualsiasi momento. Di seguito riepiloghiamo i metodi più importanti all’interno delle API.
Testo
| Metodo | Descrizione |
|---|---|
font
|
Definisce il tipo di carattere per i contenuti di testo |
fillText()
|
Inserisce testo (completamente pieno) in <canvas> HTML
|
strokeText()
|
Inserisce testo (solo contorni) |
Immagine
| Metodo | Descrizione |
|---|---|
drawImage()
|
Inserisce un’immagine o un video all’interno di un elemento <canvas> HTML
|
Disegno
| Metodo | Descrizione |
|---|---|
fillRect()
|
Disegna un rettangolo pieno |
strokeRect()
|
Disegna un rettangolo vuoto |
clearRect()
|
Cancella determinati pixel all’interno di un rettangolo |
Percorsi
| Metodo | Descrizione |
|---|---|
beginPath()
|
Inizia un nuovo percorso |
lineTo()
|
Disegna una linea verso il percorso |
moveTo()
|
Sposta il percorso in un punto all’interno della tela |
Progettazione
| Metodo | Descrizione |
|---|---|
addColorStop()
|
Definisce i colori e le posizioni di un gradiente |
createLinearGradient()
|
Crea un gradiente lineare |
createPattern()
|
Ripete un elemento |
shadowBlur
|
Definisce la sfocatura di un’ombra |
shadowColor
|
Determina il colore di un’ombra |
Altre funzioni
| Metodo | Descrizione |
|---|---|
restore()
|
Ripristina uno stato precedente |
save()
|
Salva lo stato corrente e tutti i suoi attributi |
Esempio di <canvas> HTML con testo e gradiente di colore
Nel nostro ultimo esempio, usiamo alcuni di questi metodi. Per mezzo del tag <canvas> HTML realizziamo prima una cornice da 500 x 250 pixel. Poi creiamo un oggetto 2D. Infine, inseriamo un titolo e un’altra frase con un gradiente di colore. Il codice da usare è il seguente:
<!DOCTYPE html>
<html>
<body>
<h1>Esempio di canvas HTML con testo e un gradiente di colore</h1>
<h2>Usiamo i metodi strokeText() e gradient</h2>
<canvas id="CanvasEsempio" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("CanvasEsempio");
const ctx = c.getContext("2d");
ctx.font = "40px Calibri";
ctx.strokeText("Qui c’è un titolo", 20, 50);
ctx.font = "30px Calibri";
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "teal");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "green");
ctx.strokeStyle = gradient;
ctx.strokeText("Qui c’è un’altra frase", 20, 90);
</script>
</body>
</html>- Domain Connect gratuito per una configurazione facile del DNS
- Certificato SSL Wildcard gratuito
- Protezione privacy inclusa