Canvas HTML
Le funzionalità fornite da HTML canvas sono più primitive, adatte al processing pixel, alla rendering dinamica e al disegno di grandi quantità di dati.
Cos'è l'HTML canvas
Il tag HTML5 <canvas> viene utilizzato per disegnare grafici dinamicamente tramite script (solitamente JavaScript).
Ma l'elemento <canvas> non ha funzionalità di disegno native (è solo un contenitore per grafica) - è necessario utilizzare lo script per disegnare effettivamente i grafici.
Il metodo getContext() restituisce un oggetto che fornisce metodi e proprietà per disegnare sulla tela.
Questa guida illustrerà le proprietà e i metodi dell'oggetto getContext("2d") che possono essere utilizzati per disegnare testo, linee, rettangoli, cerchi ecc. sulla tela.
Supporto del browser
IEFirefoxOperaChromeSafari
Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano le proprietà e i metodi del tag <canvas>.
Attenzione:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
Colore, stile e ombra
| Proprietà | Descrizione |
| fillStyle | Impostare o restituire il colore, il gradiente o il modello di riempimento del disegno. |
| strokeStyle | Impostare o restituire il colore, il gradiente o il modello del tratto. |
| shadowColor | Impostare o restituire il colore dell'ombra. |
| shadowBlur | Impostare o restituire il livello di sfocatura dell'ombra. |
| shadowOffsetX | Impostare o restituire la distanza orizzontale tra l'ombra e la forma. |
| shadowOffsetY | Impostare o restituire la distanza verticale tra l'ombra e la forma. |
Definisci i colori e le posizioni di arresto dell'oggetto gradient.
Imposta o restituisce la lunghezza massima della scarpata.
Percorso
| Metodo | Descrizione |
| fill() | Riempi il disegno corrente (percorso). |
| stroke() | Disegna il percorso definito. |
| beginPath() | Inizia un percorso o ripristina il percorso corrente. |
| moveTo() | Sposta il percorso al punto specificato nella tavolozza senza creare una linea. |
| closePath() | Crea un percorso che torna al punto di partenza. |
| lineTo() | Aggiungi un nuovo punto e crea una linea nella tavolozza dal punto all'ultimo punto specificato. |
| clip() | Taglia una regione di qualsiasi forma e dimensione dalla tavolozza originale. |
| quadraticCurveTo() | Crea una curva Bezier di secondo ordine. |
| bezierCurveTo() | Crea una curva Bezier di terzo ordine. |
| arc() | Crea un arco/curva (usato per creare cerchi o parti di cerchi). |
| arcTo() | Crea un arco/curva tra due tangenti. |
| isPointInPath() | Restituisce true se il punto specificato si trova nel percorso corrente, altrimenti restituisce false. |
Trasformazione
| Metodo | Descrizione |
| scale() | Scala la disegno corrente fino a più grande o più piccola. |
| rotate() | Ruota la disegno corrente. |
| translate() | Rimappa la posizione (0,0) sulla tavolozza. |
| transform() | Sostituisci la matrice di trasformazione corrente del disegno. |
| setTransform() | Reimposta la trasformazione corrente a matrice unitaria. Poi esegui transform(). |
Testo
| Proprietà | Descrizione |
| font | Imposta o restituisce le proprietà di carattere correnti utilizzate per il disegno del testo. |
| textAlign | Imposta o restituisce il modo di allineamento del contenuto del testo. |
| textBaseline | Imposta o restituisce la linea di base corrente utilizzata per il disegno del testo. |
| Metodo | Descrizione |
| fillText() | Disegna il testo "riempito" sulla tavolozza. |
| strokeText() | Disegna il testo sulla tavolozza (senza riempimento). |
| measureText() | Restituisce un oggetto che contiene la larghezza della testo specificato. |
Disegno di immagine
| Metodo | Descrizione |
| drawImage() | Disegna un'immagine, un'area di disegno o un video sulla tavolozza. |
Operazioni sui pixel
| Proprietà | Descrizione |
| width | Restituisce la larghezza dell'oggetto ImageData. |
| height | Restituisce l'altezza dell'oggetto ImageData. |
| data | Restituisce un oggetto che contiene i dati dell'immagine dell'oggetto ImageData specificato. |
| Metodo | Descrizione |
| createImageData() | Crea un nuovo oggetto ImageData vuoto. |
| getImageData() | Restituisce un oggetto ImageData, che contiene i dati dell'immagine dell'oggetto ImageData specificato. |
| putImageData() | Restituisce i dati dell'immagine (dall'oggetto ImageData specificato) sulla superficie del tavolo. |
Composizione
| Proprietà | Descrizione |
| globalAlpha | Imposta o restituisce il valore alpha o il valore di trasparenza del disegno corrente. |
| globalCompositeOperation | Imposta o restituisce come nuova immagine viene disegnata sull'immagine esistente. |
Altro
| Metodo | Descrizione |
| save() | Salva lo stato dell'ambiente corrente. |
| restore() | Restituisce lo stato e le proprietà del percorso salvato in precedenza. |
| createEvent() | |
| getContext() | |
| toDataURL() | |