Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Greenpeace
Guida ad HTML5: l’elemento canvas, manipolazione diretta dei pixel (2/2)
Scritto da Pellegrino Principe il 16-07-2010 ore 11:52
Intel Cluster Studio XE
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:
  1. if (context && context.createImageData && context.putImageData)
  2. {
  3.     // ottengo width ed heigth del canvas
  4.     var canv_w = parseInt(canvas.getAttribute("width"));
  5.     var canv_h = parseInt(canvas.getAttribute("height"));
  6.  
  7.     // creo un oggetto ImageData grande quanto il canvas
  8.     var imgd = context.createImageData(canv_w, canv_h);
  9.  
  10.     // oggetto CanvasPixelArray
  11.     var pixel_matrix = imgd.data;
  12.  
  13.     // totale dei pixel costituenti la matrice
  14.     var tot_pixel = pixel_matrix.length;
  15.  
  16.     // cambio lo stato di tutti i pixel
  17.     for (var ix = 0; ix < tot_pixel; ix += 4)
  18.     {
  19.         // blocco di un PIXEL 
  20.         pixel_matrix[ix] = Math.random() * 256; // RED 
  21.         pixel_matrix[ix + 1] = Math.random() * 256; // GREEN 
  22.         pixel_matrix[ix + 2] = Math.random() * 256; // BLUE
  23.         pixel_matrix[ix + 3] = Math.random() * 256 + 128; // ALPHA 
  24.  
  25.     }
  26.  
  27.     // disegno i pixel manipolati sul canvas
  28.     context.putImageData(imgd, 0, 0);
  29. }
Il risultato dell'esecuzione del codice è mostrato dalla seguente immagine:

4798919302_961a845b08_z.jpg

Precedente: Watermarking reversibile per le immagini digitali
Successiva: La ricerca Microsoft interviene sulle mappe dell’universo
Commenti:  Primi  «  Meno recenti  «  11 - 12 di 12
Intervento di Francesco Zoccali a.k.a. squark del 29-09-2010 ore 23:12, Galatro (RC)
Plebeo
Plebeo
(15 interventi)
Iscritto il 03-09-2002
Riciao,

a proposito del metodo Math.random() usato nel codice di esempio vorrei sapere da qualcuno di voi se tale metodo restituisce numeri strettamente compresi tra 0 ed 1 o se può restituire eventualmente anche 0 e/o 1

Grazie
Intervento di Pellegrino Principe a.k.a. thp1972 del 30-09-2010 ore 09:09, Guidonia montecelio (RM)
Plebeo
Plebeo
(18 interventi)
Iscritto il 27-09-2008
La funzione random ritorna un numero decimale, come da standard IEEE 754, tra [0,1) ovvero tra 0 incluso ed 1 escluso.

Se vuoi un numero casuale che comprenda anche il valore massimo, allora puoi usare qualcosa come:
  1. var max = 10;
  2. var nr = Math.floor(Math.random()* max + 1);

dove random genera un numero tra 0 e 11 escluso e poi lo stesso è arrotondato al più piccolo intero con floor. Ciò significa che se avrai 10.99 esso sarà 10 così come se avrai 10.11.

Bye
Commenti:  Primi  «  Meno recenti  «  11 - 12 di 12
Copyright Programmazione.it™ 1999-2013. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.287 secondi.