oggetto Tela
L'oggetto Canvas è nuovo in HTML5.
L'HTML5 <canvas> tag viene utilizzato per disegnare elementi grafici, al volo, con JavaScript.
Accedere a un oggetto Canvas
È possibile accedere a un <canvas> elemento utilizzando getElementById() :
Creare un oggetto Canvas
È possibile creare un <canvas> elemento utilizzando il document. createElement() document. createElement() Metodo:
Nota: Il <canvas> elemento non ha abilità di disegno della propria (è solo un contenitore per la grafica) - è necessario utilizzare uno script per disegnare in realtà la grafica.
Il getContext() restituisce un oggetto che fornisce metodi e proprietà per disegnare sulla tela.
Questo riferimento coprirà le proprietà ei metodi della getContext("2d") oggetto, che può essere utilizzato per disegnare testo, linee, scatole, cerchi, e più - sulla tela.
Colori, stili e ombre
| Proprietà | Descrizione |
|---|
| fillStyle | Imposta o restituisce il colore, gradiente o motivo utilizzato per riempire il disegno |
| strokeStyle | Imposta o restituisce il colore, gradiente o motivo utilizzato per corse |
| 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 "filled" rettangolo |
| strokeRect() | Disegna un rettangolo (no fill) |
| clearRect() | Cancella i pixel specificati in un determinato rettangolo |
percorsi
| Metodo | Descrizione |
|---|
| fill() | Riempie il disegno corrente (path) |
| stroke() | disegna in realtà il percorso è stato definito |
| beginPath() | Inizia un percorso, o azzera 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 da quel punto fino all'ultimo punto specificato nella tela |
| clip() | Clip una regione di qualsiasi forma e dimensione dalla tela originale |
| quadraticCurveTo() | Crea una curva di Bezier quadratica |
| bezierCurveTo() | Crea una curva di Bezier cubica |
| arc() | Crea un arco / curva (used to create circles, or parts of circles) |
| arcTo() | Crea un arco / curva tra due tangenti |
| isPointInPath() | Restituisce true se il punto specificato è nel percorso corrente, altrimenti false |
trasformazioni
| Metodo | Descrizione |
|---|
| scale() | Scala il disegno corrente maggiore o minore |
| rotate() | Ruota il disegno corrente |
| translate() | Mappa nuovamente il (0,0) la posizione sulla tela |
| transform() | Sostituisce la matrice di trasformazione corrente per il disegno |
| setTransform() | Ripristina la corrente trasformazione per la matrice identità. Poi corre transform() |
Testo
| Proprietà | Descrizione |
|---|
| font | Imposta o restituisce le proprietà del carattere correnti per il contenuto del testo |
| textAlign | Imposta o restituisce l'allineamento corrente 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 "filled" del testo sulla tela |
| strokeText() | Disegna il testo sulla tela (no fill) |
| measureText() | Restituisce un oggetto che contiene la larghezza del testo specificato |
Disegno immagine
| Metodo | Descrizione |
|---|
| drawImage() | Disegna l'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 di pixel per il rettangolo specificato su una tela |
| putImageData() | Mette i dati di immagine (from a specified ImageData object) indietro 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 viene redatto 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() | |
Proprietà ed eventi standard
L'oggetto canvas supporta anche lo standard proprietà ed eventi .
Pagine correlate
HTML tutorial: HTML5 Canvas
Di riferimento HTML: HTML <canvas> tag