HTML5 canvas in tempo reale

drawImage()

Con drawImage() è possibile disegnare un'immagine o visualizzare un video

il metodo drawImage() è disponibile in tre versioni.

• Disegnare l'immagine su <canvas>
  drawImage(img, x, y);
• Disegnare l'immagine e ridimensionarla:
  drawImage(img, x, y, width, height);
• Disegnare la parte dell'immagine ritagliata dal <canvas>:
  drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

La figura seguente mostra la relazione tra un’immagine sorgente e la stessa ritagliata su canvas.

Parametri e valori

• img: <canvas>, o elemento video da utilizzare
• sx: opzionale. Coordinata x dove cominciare clipping
• sy: opzionale. Coordinata y dove cominciare clipping
• swidth: opzionale. Larghezza dell'immagine ritagliata
• sheight: opzionale. Altezza dell'immagine ritagliata
• x: Coordinata x dove posizionare l'immagine su <canvas>
• y: Coordinata y dove posizionare l'immagine su <canvas>
• width: opzionale. Larghezza dell'immagine da utilizzare
• height: opzionale. Altezza dell'immagine da utilizzare

1. Normal paint (disegno standard)
   drawImage(Image, dx, dy)
   Questa funzione necessita di 3 parametri: un oggetto Immagine e valori x,y che definiscono la posizione in alto a sinistra dalla quale cominciare a disegnare l'immagine su <canvas>.
   Per disegnare l'immagine nella posizione 0,0 (nell'angolo in alto a sinistra) del <canvas>:
   ctx.drawImage(spaceShip, 0, 0);
   Per disegnare un'altra copia a 50,50, è necessario fare una chiamata uguale, ma cambiare la posizione:
   ctx.drawImage(spaceShip, 50, 50);
2. Resize (Ridimensiona)
   Per scalare le immagini, possiamo anche passare parametri alla funzione drawImage ().
   La seconda versione di drawImage () necessita di 5 parametri:
   drawImage(Image, dx, dy, dw, dh)
   un oggetto Immagine e valori x,y che definiscono la posizione in alto a sinistra
   dw e dh definiscono larghezza e l'altezza del sorgente che sarà disegnato.
   Per scalare l'immagine utilizzare il codice:
   ctx.drawImage(spaceShip, 0, 0,55,55);
3. Draw Image Part (Disegnare Parte Immagine)
   La terza versione drawImage () permette di disegnare un rettangolo arbitrario.
   I parametri necessari sono:
   drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh)
   sx e sy =  punto di origine del ritaglio sull'immagine sorgente.
   sw e sh = larghezza altezza del rettangolo ritagliato a partire da sx e sy.
   Quel rettangolo verrà copiato sulla <canvas> alla posizione dx e dy.
   dw e dh = nuova dimensione dell'immagine copiata su <canvas>.

Acquistabile da:
• bookrepublic
• ebook LeggoOggi.it
• EURONICS
• freeonline
• Gola Ad
• GPLAY
• HOEPLI
• iTunes
• kobo
• omnia BUK
• SECRETARY
• StreetLib

Questo e-book è un e-book interattivo, ciò significa che il lettore può inserire dei dati nelle pagine ed il contenuto di queste si adeguerà ai nuovi valori. Per inserire i dati, nelle pagine dell’e-book, sono stati implementati dei controlli simili a quelli che si possono trovare sulle pagine Internet ed un pulsante esegui per impartire il comando di adeguare il contenuto della pagina ai nuovi valori.