Manuale di riferimento Canvas HTML
Manuale di riferimento Canvas HTML
Il tag HTML <canvas> viene utilizzato per disegnare grafici dinamicamente tramite script (solitamente JavaScript).
Per ulteriori informazioni sul <canvas>, leggere la nostra guida HTML Canvas.
Colore, stile e ombra
| Proprietà |
Descrizione |
| fillStyle |
Impostare o restituire il colore, la gradazione o il pattern di riempimento |
| strokeStyle |
Impostare o restituire il colore, la gradazione o il pattern 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 della ombra rispetto alla forma |
| shadowOffsetY |
Impostare o restituire la distanza verticale della ombra rispetto alla forma |
| Metodo |
Descrizione |
| createLinearGradient() |
Creare una gradazione lineare (usata sul contenuto del canvas) |
| createPattern() |
Ripetere l'elemento specificato nella direzione specificata |
| createRadialGradient() |
Creare una gradazione radiale/ elicoidale (usata sul contenuto del canvas) |
| addColorStop() |
Definire i colori e le posizioni di arresto della gradazione all'interno dell'oggetto gradazione |
Stile della linea
| Proprietà |
Descrizione |
| lineCap |
Impostare o restituire lo stile del punto di fine della linea |
| lineJoin |
Impostare o restituire il tipo di angolo creato quando due linee si intersecano |
| lineWidth |
Impostare o restituire la larghezza della linea corrente |
| miterLimit |
Impostare o restituire la lunghezza massima della scarpata |
Rettangolo
| Metodo |
Descrizione |
| rect() |
Creare un rettangolo |
| fillRect() |
Disegnare un rettangolo 'riempito' |
| strokeRect() |
Disegnare un rettangolo (senza riempimento) |
| clearRect() |
Cancellare i pixel specificati all'interno di un rettangolo dato |
Percorso
| Metodo |
Descrizione |
| fill() |
Riempire il disegno corrente (percorso) |
| stroke() |
Disegnare il percorso definito |
| beginPath() |
Iniziare un percorso o ripristinare il percorso corrente |
| moveTo() |
Spostare il percorso al punto specificato sul canvas senza creare una linea |
| closePath() |
Creare un percorso che ritorna al punto di partenza |
| lineTo() |
Aggiungere un nuovo punto e creare una linea dal punto all'ultimo punto specificato sul canvas |
| clip() |
Tagliare una regione di qualsiasi forma e dimensione dal canvas originale |
| quadraticCurveTo() |
Crea una curva Bezier quadratica |
| bezierCurveTo() |
Crea una curva cubica Bezier |
| 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 il disegno corrente di più o meno |
| rotate() |
Ruota il disegno corrente |
| translate() |
Rimappa la posizione (0,0) attuale sulla superficie |
| transform() |
Sostituisci la matrice di trasformazione corrente del disegno |
| setTransform() |
Ripristina la trasformazione corrente a matrice unitaria. Poi esegui transform(). |
Testo
| Proprietà |
Descrizione |
| font |
Imposta o restituisce le proprietà di carattere del contenuto del testo corrente |
| textAlign |
Imposta o restituisce il modo di allineamento del contenuto del testo corrente |
| textBaseline |
Imposta o restituisce la base di testo corrente utilizzata nel disegno del testo |
| Metodo |
Descrizione |
| fillText() |
Disegna il testo 'riempito' sulla superficie |
| strokeText() |
Disegna il testo sulla superficie senza riempimento |
| measureText() |
Restituisce un oggetto che contiene la larghezza del testo specificato |
Disegno dell'immagine
| Metodo |
Descrizione |
| drawImage() |
Disegna un'immagine, uno schermo o un video sullo schermo |
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 (dal objeto ImageData specificato) sullo schermo |
Composizione
| Proprietà |
Descrizione |
| globalAlpha |
Imposta o restituisce il valore alpha o il valore di trasparenza corrente del disegno |
| globalCompositeOperation |
Imposta o restituisce come il nuovo 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() |
|
