Etichetta HTML <canvas>

Definizione e uso

<canvas> Le etichette sono solitamente disegnate in tempo reale tramite script (solitamente JavaScript).

<canvas> Le etichette sono trasparenti, rappresentano solo contenitori grafici e devono essere disegnate effettivamente utilizzando script.

In browser con JavaScript disabilitato e senza supporto <canvas> Nei browser <canvas> Testo presente all'interno dell'elemento.

Suggerimento

Impara di più su HTML Canvas nel nostro <canvas> Conoscenze sull'elemento.

Per vedere una guida completa di tutte le proprietà e i metodi, visita la nostra Manuale di riferimento HTML Canvas.

Esempio

Esempio 1

Disegna in tempo reale un rettangolo rosso e mostralo nell'elemento <canvas>:

<canvas id="myCanvas">
Il tuo browser non supporta il tag canvas.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Prova direttamente

Esempio 2

Un altro esempio di <canvas>:

<canvas id="myCanvas">
Il tuo browser non supporta il tag canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Apri l'opacità
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Prova direttamente

Proprietà

Proprietà Valore Descrizione
height Valore in pixel Determina l'altezza del canvas. Il valore predefinito è 150.
width Valore in pixel Determina la larghezza del canvas. Il valore predefinito è 300.

Proprietà globali

<canvas> Il tag supporta anche Proprietà globali HTML.

Proprietà degli eventi

<canvas> Il tag supporta anche Proprietà degli eventi HTML.

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <canvas> Elemento:

canvas {
  height: 150px;
  width: 300px;
}

Prova direttamente

Storia di <canvas>

Questo elemento HTML è progettato per grafica vettoriale client. Non ha comportamenti propri, ma esponendo un'API di disegno al JavaScript client, permette agli script di disegnare tutto ciò che desiderano su una superficie di disegno.

Il tag <canvas> è stato introdotto da Apple nel browser web Safari 1.3. La ragione di questa fondamentale estensione di HTML è che la capacità di disegno di HTML in Safari è utilizzata anche dal componente Dashboard di macOS X, e Apple desiderava avere un modo per supportare grafica scriptata nel Dashboard.

Firefox 1.5 e Opera 9 hanno seguito la leadership di Safari. Entrambi i browser supportano il tag <canvas>.

Possiamo anche utilizzare il tag <canvas> in IE e costruire una compatibilità con il canvas utilizzando codice JavaScript open source (iniziato da Google) basato sul supporto VML di IE. Vedere:http://excanvas.sourceforge.net/.

Gli sforzi di standardizzazione di <canvas> sono promossi da un'associazione informale di produttori di browser web, e attualmente <canvas> è diventato un tag ufficiale dello schema HTML 5. Vedere:http://www.whatwg.org/specs/web-apps/current-work/

Differenze tra il tag <canvas>, SVG e VML.

Una delle differenze importanti tra il tag <canvas>, SVG e VML è che <canvas> ha un'API di disegno basata su JavaScript, mentre SVG e VML utilizzano un documento XML per descrivere il disegno.

Questi due modi sono funzionalmente equivalenti; uno può essere simulato dall'altro. Sulla superficie, sono molto diversi, ma ognuno ha punti di forza e debolezza. Ad esempio, il disegno SVG è facile da editare, basta rimuovere gli elementi dalla sua descrizione.

Per rimuovere un elemento da un <canvas> con lo stesso grafico, spesso è necessario cancellare il disegno e ridisegnarlo.

Come utilizzare il tag <canvas> per il disegno.

La maggior parte delle API di disegno Canvas non è definita sull'elemento <canvas> stesso, ma su quelli che passano attraverso il. metodo getContext().su un oggetto di ambiente di disegno.

L'API Canvas utilizza anche la notazione dei percorsi. Ma i percorsi sono definiti da una serie di chiamate ai metodi, non descritti come stringhe di lettere e numeri, come ad esempio le chiamate ai metodi beginPath() e arc().

Una volta definito il percorso, altri metodi come fill() operano su questo percorso. Le varie proprietà dell'ambiente di disegno, come fillStyle, spiegano come vengono utilizzate queste operazioni.

Nota:Un motivo per cui l'API Canvas è molto compatta è che non fornisce alcun supporto per il disegno del testo. Per aggiungere testo a un'immagine <canvas>, è necessario disegnarlo manualmente e combinarlo con un'immagine bitmap, o utilizzare la posizionamento CSS sopra il <canvas> per coprire il testo HTML.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'elemento.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0