Vediamo ora le funzioni che possiamo utilizzare per la manipolazione diretta dei pixel sul canvas:
- createImageData(width, height) consente di creare un oggetto di tipo ImageData con la larghezza in pixel specificata dal parametro width e l’altezza in pixel specificata dal parametro height. Tutti i pixel avranno inizialmente il canale Alpha impostato a 0 (trasparente) e i colori RGB impostati a 0 (nero). Quando si crea un oggetto ImageData con la suddetta funzione bisogna considerare che i pixel indicati sono trattati come CSS pixel, mentre l’oggetto creato ha i pixel mappati secondo il device di visualizzazione in uso. Pertanto è buona norma controllare sempre se c’è una discordanza tra i pixel forniti all’atto della creazione e quelli risultanti;
- createImageData(image_data) consente di creare un oggetto di tipo ImageData, che ha le stesse dimensioni di un altro oggetto, dello stesso tipo, passato come argomento alla funzione. Anche in questo caso tutti i pixel dell’oggetto ImageData ritornato saranno neri e trasparenti;
- getImageData(left, top, width, height) consente di ottenere un oggetto di tipo ImageData prendendo dal canvas attuale il rettangolo di pixel indicato dai parametri left, top, width ed height. Questo metodo conterrà una copia della matrice di pixel indicati dai parametri;
- putImageData(image_data, left, top, [sub_left, sub_top, sub_width, sub_height]), consente di disegnare sul canvas i pixel contenuti nel parametro image_data alle coordinate indicate dai parametri left e top ed eventualmente decidere di disegnare solo la porzione di pixel, dell'oggetto image_data, indicati dai parametri sub_left, sub_top, sub_width e sub_height.
Il seguente snippet di codice mostra come si crea un oggetto di tipo
ImageData, grande quanto tutto il canvas, e come poi su di esso si disegnano tutti i pixel, ciascuno con un colore e con un canale Alpha differente:
if (context && context.createImageData && context.putImageData)
{ // ottengo width ed heigth del canvas
var canv_w = parseInt(canvas.getAttribute("width")); var canv_h = parseInt(canvas.getAttribute("height"));
// creo un oggetto ImageData grande quanto il canvas
var imgd = context.createImageData(canv_w, canv_h);
// oggetto CanvasPixelArray
var pixel_matrix = imgd.data;
// totale dei pixel costituenti la matrice
var tot_pixel = pixel_matrix.length;
// cambio lo stato di tutti i pixel
for (var ix = 0; ix < tot_pixel; ix += 4)
{ // blocco di un PIXEL
pixel_matrix[ix] = Math.random() * 256; // RED
pixel_matrix[ix + 1] = Math.random() * 256; // GREEN
pixel_matrix[ix + 2] = Math.random() * 256; // BLUE
pixel_matrix[ix + 3] = Math.random() * 256 + 128; // ALPHA
}
// disegno i pixel manipolati sul canvas
context.putImageData(imgd, 0, 0);
}
Il risultato dell'esecuzione del codice è mostrato dalla seguente immagine:
- Pubblicazioni correlate:
- 10-05-2010 Guida ad HTML5: storia della sua nascita (1/3)
- 11-05-2010 Guida ad HTML5: storia della sua nascita (2/3)
- 17-05-2010 Guida ad HTML5: storia della sua nascita (3/3)
- 18-05-2010 Guida ad HTML5: supporto dei browser (1/6)
- 24-05-2010 Guida ad HTML5: supporto dei browser (2/6)
- 25-05-2010 Guida ad HTML5: supporto dei browser (3/6)
- 31-05-2010 Guida ad HTML5: supporto dei browser (4/6)
- 01-06-2010 Guida ad HTML5: supporto dei browser (5/6)
- 07-06-2010 Guida ad HTML5: supporto dei browser (6/6)
- 08-06-2010 Guida ad HTML5: l'elemento canvas, l'area del disegno
- 14-06-2010 Guida ad HTML5: l’elemento canvas, disegno di forme geometriche (1/4)
- 18-06-2010 Guida ad HTML5: l’elemento canvas, disegno di forme geometriche (2/4)
- 21-06-2010 Guida ad HTML5: l’elemento canvas, disegno di forme geometriche (3/4)
- 25-06-2010 Guida ad HTML5: l’elemento canvas, disegno di forme geometriche (4/4)
- 28-06-2010 Guida ad HTML5: l’elemento canvas, immagini e testo (1/4)
- 02-07-2010 Guida ad HTML5: l’elemento canvas, immagini e testo (2/4)
- 05-07-2010 Guida ad HTML5: l’elemento canvas, immagini e testo (3/4)
- 09-07-2010 Guida ad HTML5: l’elemento canvas, immagini e testo (4/4)
- 12-07-2010 Guida ad HTML5: l’elemento canvas, manipolazione diretta dei pixel (1/2)
- 19-07-2010 Guida ad HTML5: l’elemento canvas, sfumature
- 23-07-2010 Guida ad HTML5: l’elemento canvas, ombreggiature
- 26-07-2010 Guida ad HTML5: l’elemento canvas, compositing (1/2)
- 30-07-2010 Guida ad HTML5: l’elemento canvas, compositing (2/2)
- 30-08-2010 Guida ad HTML5: l’elemento canvas, stili di linea e pattern (1/2)
- 03-09-2010 Guida ad HTML5: l’elemento canvas, stili di linea e pattern (2/2)
- 06-09-2010 Guida ad HTML5: multimedialità, concetti propedeutici (1/2)
- 10-09-2010 Guida ad HTML5: multimedialità, concetti propedeutici (2/2)
- 13-09-2010 Guida ad HTML5: multimedialità, l'elemento video
- 17-09-2010 Guida ad HTML5: multimedialità, gli elementi audio e source
- 20-09-2010 Guida ad HTML5: multimedialità, scripting dei media element (1/6)
- 24-09-2010 Guida ad HTML5: multimedialità, scripting dei media element (2/6)
- 27-09-2010 Guida ad HTML5: multimedialità, scripting dei media element (3/6)
- 01-10-2010 Guida ad HTML5: multimedialità, scripting dei media element (4/6)
- 04-10-2010 Guida ad HTML5: multimedialità, scripting dei media element (5/6)
- 08-10-2010 Guida ad HTML5: multimedialità, scripting dei media element (6/6)
- 11-10-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (1/7)
- 15-10-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (2/7)
- 20-10-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (3/7)
- 22-10-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (4/7)
- 25-10-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (5/7)
- 29-10-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (6/7)
- 05-11-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (7/7)
- 08-11-2010 Guida ad HTML5: storage per le web application (1/3)
- 12-11-2010 Guida ad HTML5: storage per le web application (2/3)
- 15-11-2010 Guida ad HTML5: storage per le web application (3/3)
- 19-11-2010 Guida ad HTML5: eseguire codice JavaScript in background (1/3)
- 22-11-2010 Guida ad HTML5: eseguire codice JavaScript in background (2/3)
- 26-11-2010 Guida ad HTML5: eseguire codice JavaScript in background (3/3)
- 29-11-2010 Guida ad HTML5: applicazioni web offline (1/5)
- 03-12-2010 Guida ad HTML5: applicazioni web offline (2/5)
- 06-12-2010 Guida ad HTML5: applicazioni web offline (3/5)
- 10-12-2010 Guida ad HTML5: applicazioni web offline (4/5)
- 13-12-2010 Guida ad HTML5: applicazioni web offline (5/5)
- 17-12-2010 Guida ad HTML5: la geolocalizzazione (1/4)
- 20-12-2010 Guida ad HTML5: la geolocalizzazione (2/4)
- 24-12-2010 Guida ad HTML5: la geolocalizzazione (3/4)
- 27-12-2010 Guida ad HTML5: la geolocalizzazione (4/4)
- 31-12-2010 Guida ad HTML5: microdata (1/4)
- 03-01-2011 Guida ad HTML5: microdata (2/4)
- 10-01-2011 Guida ad HTML5: microdata (3/4)
- 14-01-2011 Guida ad HTML5: microdata (4/4)
- 17-01-2011 Guida ad HTML5: drag and drop (1/5)
- 21-01-2011 Guida ad HTML5: drag and drop (2/5)
- 24-01-2011 Guida ad HTML5: drag and drop (3/5)
- 28-01-2011 Guida ad HTML5: drag and drop (4/5)
- 31-01-2011 Guida ad HTML5: drag and drop (5/5)
- 04-02-2011 Guida ad HTML5: nuovi elementi semantici (1/6)
- 07-02-2011 Guida ad HTML5: nuovi elementi semantici (2/6)
- 11-02-2011 Guida ad HTML5: nuovi elementi semantici (3/6)
- 14-02-2011 Guida ad HTML5: nuovi elementi semantici (4/6)
- 18-02-2011 Guida ad HTML5: nuovi elementi semantici (5/6)
- 21-02-2011 Guida ad HTML5: nuovi elementi semantici (6/6)
- 25-02-2011 Guida ad HTML5: l’API di messaggistica (1/8)
- 28-02-2011 Guida ad HTML5: l’API di messaggistica (2/8)
- 04-03-2011 Guida ad HTML5: l’API di messaggistica (3/8)
- 07-03-2011 Guida ad HTML5: l’API di messaggistica (4/8)
- 11-03-2011 Guida ad HTML5: l’API di messaggistica (5/8)
- 14-03-2011 Guida ad HTML5: l’API di messaggistica (6/8)
- 18-03-2011 Guida ad HTML5: l’API di messaggistica (7/8)
- 21-03-2011 Guida ad HTML5: l’API di messaggistica (8/8)