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


Manipolazione a livello pixel

imageData: Un oggetto imageData contiene le componenti RGBAdi una regione rettangolare di pixel.
L'oggetto imageData può essere ottenuto con i metodi ceateImageData() e getImageData().

  • createImageData() Crea un nuovo oggetto ImageData vuoto
    Ogni pixel dell’oggetto ImageData dispone di quattro elementi 
    RGBA dove:
    R: Quantità di colore rosso da 0 a 255
    G: Quantità di colore verde da 0 a 255
    B: Quantità di colore blu da 0 a 255
    A: Canale alpha da 0 a 255, dove con 0 l’oggetto è trasparente, con 255 completamente opaco.
    Ad esempio, il nero trasparente è: (0,0,0,0).
    Le immagini sono memorizzate con informazioni colore a 32 bit per ogni pixel.
    Le informazioni sul colore/alpha è un un array, che contiene 4 informazioni per ogni pixel.
    Per qesta ragione le dimensioni della matrice è 4 volte la dimensione dell'oggetto ImageData: larghezza * altezza * 4.
    (Per trovare la dimensione dell'array utilizzare ImageDataObject.data.length)
    Dopo aver manipolato le informazioni colore/alpha nella matrice, è possibile copiare i dati sul <canvas> con putImageData ().

  • getImageData () Restituisce un oggetto rettangolare ImageData recuperano i dati di ciascun pixel letto nel <canvas>.
    Ogni pixel dell'oggetto ImageData ha quattro volori RGBA:
    R: Quantità di rosso fra 0 e 255.
    G: Quantità di verde fra 0 e 255.
    B: Quantità di blu fra 0 e 255.
    A: Canale alpha fra 0 a 255 che determina l'opacità. Zero pixel è trasparente, 255 completamente opaco.

  • putImageData() Inserisce i dati di una immagine (da un oggetto ImageData specificato) nel <canvas>.
    Compie il lavoro inverso della funzione 
    getImageData () per i parametri RGBA con la sintassi:
    imgDataSpecifica l'oggetto ImageData da copiare di nuovo sul <canvas>
    x: Coordinata x, in pixel, l'angolo superiore sinistro dell'oggetto ImageData
    y: Coordinata y, in pixel, l'angolo superiore sinistro dell'oggetto ImageData
    dirtyX: Facoltativo. Il valore orizzontale (x), in pixel, dove prelevare dall'immagine copiata.
    dirtyY: Facoltativo. Il valore orizzontale (y), in pixel, dove prelevare dall'immagine copiata.
    dirtyWidth Facoltativo. Larghezza da utilizzare per disegnare l'immagine.
    dirtyHeight Facoltativo. Altezza da utilizzare per disegnare l'immagine.









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