Utilizzo cookies
L'e-book interattivo I colori Comandi base save() & restore() Stili di linee Rettangoli Archi e Circonferenze clip() Colori gradienti e stili Effetti Ombra Curve di Bezier Testo Trasformazioni Disegnare con Immagini Manipolazione dei Pixel Alpha trasparenza globalCompositeOperation convertire <canvas> Animazioni Grafici 20 Equazioni e spirali

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>.

 

 

 

 

 




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.
Antonella Brandi
Art-designer