L'elemento HTML5 <canvas> serve per disegnare grafici tramite script (solitamente JavaScript). Scopri proprietà e metodi per disegnare sul canvas.
L'elemento HTML5 <canvas> viene utilizzato per disegnare grafici tramite scripting (solitamente JavaScript). Di per sé, l'elemento <canvas> è solo un contenitore vuoto — si disegna al suo interno tramite uno script.
Per ottenere qualcosa con cui disegnare, si chiama il metodo getContext('2d') dell'elemento. Questo restituisce un oggetto CanvasRenderingContext2D:
Quasi ogni proprietà e metodo in questa pagina appartiene a quell'oggetto di contesto 2D (ctx nell'esempio), non all'elemento <canvas>. Le due eccezioni sono getContext() e toDataURL(), che appartengono all'elemento <canvas> stesso, e le proprietà width/height/data nella sezione Manipolazione dei pixel, che appartengono agli oggetti ImageData. Questi sono raggruppati nelle rispettive sezioni di seguito.
Imposta o restituisce lo stile delle estremità della linea.
lineJoin
Imposta o restituisce il tipo di angoli disegnati.
lineWidth
Imposta o restituisce la larghezza della linea corrente.
miterLimit
Imposta o restituisce la lunghezza massima del miter.
lineDashOffset
Imposta o restituisce lo scostamento per i pattern di linee tratteggiate.
Metodo
Descrizione
getLineDash()
Restituisce il pattern di tratteggio corrente come array di numeri.
setLineDash()
Imposta il pattern di tratteggio da un array di numeri (es. [5, 3]).
Rettangoli
Metodo
Descrizione
rect()
Crea rettangoli.
fillRect()
Disegna rettangoli pieni.
strokeRect()
Disegna i contorni di un rettangolo.
clearRect()
Cancella i pixel specificati all'interno di un determinato rettangolo.
Percorsi
Metodo
Descrizione
fill()
Riempie il/i sotto-percorso/i corrente/i con il fillStyle corrente.
stroke()
Traccia il/i sotto-percorso/i corrente/i con il strokeStyle corrente.
beginPath()
Inizia un nuovo percorso o reimposta il percorso corrente.
moveTo()
Sposta il percorso verso il punto definito nel canvas senza tracciare una linea.
closePath()
Aggiunge un percorso dal punto corrente al punto iniziale.
lineTo()
Aggiunge una linea al sotto-percorso corrente.
clip()
Crea una regione di ritaglio dal percorso corrente.
quadraticCurveTo()
Aggiunge una curva di Bézier quadratica.
bezierCurveTo()
Aggiunge una curva di Bézier cubica.
arc()
Aggiunge un arco/curva per creare cerchi o parti di cerchi.
arcTo()
Aggiunge un arco/curva tra due tangenti.
ellipse()
Aggiunge un arco ellittico al percorso.
isPointInPath()
Indica se il punto specificato si trova nel percorso corrente o meno.
Trasformazioni
Metodo
Descrizione
scale()
Ingrandisce o riduce il disegno corrente.
rotate()
Ruota il disegno corrente.
translate()
Regola il sistema di coordinate del canvas.
transform()
Applica una matrice di trasformazione al canvas.
setTransform()
È simile a transform(). Può essere usata per distorcere, scalare e traslare il canvas.
resetTransform()
Reimposta la trasformazione corrente alla matrice identità.
Vedi Coordinate Canvas per come la matrice di trasformazione mappa le posizioni di disegno sui pixel.
Testo
Proprietà
Descrizione
font
Imposta l'aspetto del testo disegnato sul canvas.
textAlign
Imposta l'allineamento del testo disegnato sul canvas.
textBaseline
Imposta l'allineamento verticale del testo disegnato sul canvas.
direction
Imposta o restituisce la direzione del testo (ltr, rtl o inherit).
Metodo
Descrizione
fillText()
Aggiunge testo al canvas.
strokeText()
Aggiunge testo con solo il contorno al canvas.
measureText()
Misura la larghezza del testo.
Vedi il tutorial Testo Canvas per esempi completi.
Disegno di Immagini
Proprietà
Descrizione
imageSmoothingEnabled
Imposta o restituisce se le immagini scalate vengono rese sfumate (true) o pixelate (false).
Metodo
Descrizione
drawImage()
Disegna un'immagine, un video o un canvas sul canvas.
Manipolazione dei Pixel
Le proprietà seguenti appartengono all'oggetto ImageData restituito da createImageData() / getImageData(), non all'elemento <canvas> o al contesto.
Proprietà ImageData
Descrizione
width
Restituisce la larghezza in pixel di un oggetto ImageData.
height
Restituisce l'altezza in pixel di un oggetto ImageData.
data
Restituisce un Uint8ClampedArray contenente i dati pixel RGBA.
Metodo
Descrizione
createImageData()
Crea un nuovo oggetto ImageData.
getImageData()
Restituisce un oggetto ImageData che copia i dati pixel del rettangolo specificato.
putImageData()
Inserisce i dati immagine sul canvas dall'oggetto ImageData.
Compositing
Proprietà
Descrizione
globalAlpha
Imposta o restituisce il valore alfa/trasparenza corrente.
globalCompositeOperation
Imposta o restituisce il tipo di operazione di compositing quando viene disegnata una nuova immagine.
filter
Imposta o restituisce un filtro CSS applicato al disegno (es. blur(4px), grayscale(1)).
Stato del Canvas
Questi metodi appartengono al contesto 2D e consentono di salvare e ripristinare l'intero stato di disegno (stili, trasformazioni, regione di ritaglio) come uno stack.
Metodo
Descrizione
save()
Inserisce lo stato corrente del contesto nello stack degli stati.
restore()
Estrae lo stato salvato più di recente, ripristinando quegli stili e trasformazioni.
L'elemento <canvas>
I seguenti membri appartengono all'elemento <canvas> stesso, non al contesto 2D.
Membro
Descrizione
getContext()
Restituisce un contesto di disegno per il canvas — passare '2d' per un CanvasRenderingContext2D.
toDataURL()
Restituisce un data URL (immagine base64) del contenuto del canvas, es. 'image/png'.
Esercitazione
Pratica
Cosa può fare il metodo getContext('2d') in HTML5 Canvas?