Descrizione L'HTML5 <canvas>
Tuttavia, il <canvas>
Il getContext() metodo restituisce un oggetto che fornisce metodi e proprietà per il disegno sulla tela.
Questo riferimento riguarderà le proprietà ei metodi della getContext("2d") oggetto, che può essere usato per disegnare il testo, linee, scatole, cerchi, e molto altro ancora - sulla tela.
Supporto per il browser I numeri nella tabella indicano la prima versione del browser che supporta pienamente l'elemento.
Elemento <canvas> 4.0 9.0 2.0 3.1 9.0
Internet Explorer 9, Firefox, Opera, Chrome, Safari e il supporto <canvas>
Nota: Internet Explorer 8 e versioni precedenti, non supportano il <canvas>
Colori, stili e ombre Proprietà Descrizione fillStyle Imposta o restituisce il colore, una sfumatura o un modello utilizzato per riempire il disegno strokeStyle Imposta o restituisce il colore, una sfumatura o un modello utilizzato per i colpi shadowColor Imposta o restituisce il colore da utilizzare per le ombre shadowBlur Imposta o restituisce il livello di sfocatura per le ombre shadowOffsetX Imposta o restituisce la distanza orizzontale dell'ombra dalla forma shadowOffsetY Imposta o restituisce la distanza verticale dell'ombra dalla forma
Stili di linea Proprietà Descrizione lineCap Imposta o restituisce lo stile dei tappi di chiusura per una linea lineJoin Imposta o restituisce il tipo di angolo creato, quando due linee si incontrano lineWidth Imposta o restituisce la larghezza della linea corrente miterLimit Imposta o restituisce la lunghezza massima mitra
rettangoli metodo Descrizione rect() Crea un rettangolo fillRect() Disegna un rettangolo "pieno" strokeRect() Disegna un rettangolo (senza riempimento) clearRect() Cancella i pixel specificati all'interno di un rettangolo dato
percorsi metodo Descrizione fill() Riempie il disegno corrente (percorso) stroke() In realtà disegna il percorso è stato definito beginPath() Inizia un percorso, o resetta il percorso corrente moveTo() Sposta il percorso del punto specificato nella tela, senza creare una linea closePath() Crea un percorso dal punto corrente al punto di partenza lineTo() Aggiunge un nuovo punto e crea una linea a quel punto dall'ultimo punto specificato nella tela clip() Clip di una regione di qualsiasi forma e dimensione della tela originale quadraticCurveTo() Crea una curva di Bezier quadratica bezierCurveTo() Crea una curva di Bézier cubica arc() Crea un arco / curva (utilizzato per creare cerchi, o parti di cerchi) arcTo() Crea un arco / curva tra due tangenti isPointInPath() Restituisce vero se il punto specificato è nel percorso corrente, altrimenti false
trasformazioni metodo Descrizione scale() Scala il disegno corrente grande o più piccolo rotate() Ruota il disegno corrente translate() Mappa nuovamente la posizione (0,0) sulla tela transform() Sostituisce la matrice di trasformazione corrente per il disegno setTransform() Ripristina la corrente trasformazione alla matrice identità. Poi corre transform ()
Testo Proprietà Descrizione font Imposta o restituisce le proprietà dei font correnti per il contenuto del testo textAlign Imposta o restituisce l'allineamento corrente per il contenuto del testo textBaseline Imposta o restituisce l'attuale linea di base del testo utilizzati in sede di elaborazione del testo
metodo Descrizione fillText() Disegna testo "pieno" sulla tela strokeText() Disegna il testo sulla tela (nessun riempimento) measureText() Restituisce un oggetto che contiene la larghezza del testo specificato
Disegno immagine metodo Descrizione drawImage() Disegna un'immagine, tela, o un video sulla tela
Pixel Manipolazione Proprietà Descrizione width Restituisce la larghezza di un oggetto ImageData height Restituisce l'altezza di un oggetto ImageData data Restituisce un oggetto che contiene i dati di immagine di un oggetto specificato ImageData
metodo Descrizione createImageData() Crea un nuovo oggetto ImageData vuoto getImageData() Restituisce un oggetto ImageData che copia i dati pixel per il rettangolo specificato su una tela putImageData() Mette i dati di immagine (da un oggetto ImageData specificata) di nuovo sulla tela
compositing Proprietà Descrizione globalAlpha Imposta o restituisce il valore alfa o la trasparenza corrente del disegno globalCompositeOperation Imposta o restituisce come una nuova immagine vengono prelevati su un'immagine esistente
Altro metodo Descrizione save() Salva lo stato del contesto attuale restore() Restituisce precedentemente salvato percorso di Stato e gli attributi createEvent() getContext() toDataURL()