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


getImageData(), ottenere i dati dei pixel

Ogni pixel nei dati immagine contiene quattro componenti, un componente rosso, verde, blu e alfa.
  • Leggere i dati di ciascun pixel usando le coordinate x, y
    var imageData = ctx.getImageData(imageX, imageY, imageWidth, imageHeight);
    var data = imageData.data;
    var x = 20; var y = 20;
    var red = data[((imageWidth * y) + x) * 4];
    var green = data[((imageWidth * y) + x) * 4 + 1];
    var blue = data[((imageWidth * y) + x) * 4 + 2];
    var alpha = data[((imageWidth * y) + x) * 4 + 3];
     
  • Leggere i dati di ciascun pixel con loop
    var imageData = ctx.getImageData(imageX, imageY, imageWidth, imageHeight);
    var data = imageData.data;
    // loop riga
    for(var y = 0; y < imageHeight; y++) {
    // loop colonna
    for(var x = 0; x < imageWidth; x++) {
    var red = data[((imageWidth * y) + x) * 4];
    var green = data[((imageWidth * y) + x) * 4 + 1];
    var blue = data[((imageWidth * y) + x) * 4 + 2];
    var alpha = data[((imageWidth * y) + x) * 4 + 3];
    }
    }



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