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, immagini e testo (1/4)
Scritto da Pellegrino Principe il 28-06-2010 ore 09:51
Intel Cluster Studio XE
All’interno di un canvas possiamo visualizzare delle immagini attraverso l’utilizzo dei seguenti metodi:
  • drawImage(image, x_coord, y_coord) indica un’immagine da disegnare con il parametro image e le coordinate x e y per posizionare l’immagine settando i parametri x_coord e y_coord;
  • drawImage(image, x, y, scale_w, scale_h) indica un’immagine da disegnare con il parametro image; le coordinate x e y per posizionare l’immagine con i parametri x_coord e y_coord; e i pixel in larghezza e in altezza, da utilizzare per ridimensionare l’immagine con i parametri scale_w e scale_h;
  • drawImage(image, source_x, source_y, source_w, source_h, x, y, scale_w, scale_h) indica un’immagine da disegnare con il parametro image; l’area interna dell’immagine da utilizzare con i parametri source_x, source_y, source_w e source_h, nella quale posizionare l’immagine con i parametri x e y; e i pixel in larghezza e in altezza da utilizzare per ridimensionare l’immagine con i parametri scale_w e scale_h.
Prima di vedere un codice di esempio, che mostrerà come utilizzare i metodi suddetti, soffermiamoci sul parametro image, comune in tutte le funzioni di disegno. Esso rappresenta l’immagine da disegnare sul canvas, che può essere ricavata in uno dei seguenti modi:
  • utilizzando un’immagine che è già presente nella pagina HTML, come tag image, che reperiremo attraverso i consueti metodi di ricerca degli elementi del DOM:
  1. var my_image = document.getElementById("stallman");
  • utilizzando direttamente un altro canvas, sul quale avremo disegnato qualcosa:
  1. var my_image = document.getElementById("my_canvas");
  • creando un oggetto Image tramite il costruttore new Image():
  1. var my_image = new Image();
  2. my_image.src = "stallman.png";
  3. my_image.addEventListener("load", function(){},false);
  • attraverso l’utilizzo dello schema data URL, che consente di includere l'immagine direttamente nella pagina, come sequenza di caratteri codificati in Base64:
  1. var my_img = "data:image/png;base64,SBsb2CBmb3IgdGVHRse2ZXIK5nZXIgdGVzdAAAA3pn/ZiH5B==";
Vediamo, ora, alcuni esempi di utilizzo dei suddetti metodi partendo dal disegno di una semplice immagine, la quale sarà poi ridimensionata e dalla quale sarà infine prelevata un’area proiettata nel canvas a una determinata posizione:
  1. <script type="text/javascript">
  2.  
  3.         function init()
  4.         {
  5.             var canvas = document.getElementById("tela");
  6.             if (canvas && HTML5.Features.hasCanvas())
  7.             {
  8.                 var context = canvas.getContext("2d");
  9.  
  10.                 if (context && context.drawImage)
  11.                 {
  12.                     var img = new Image();
  13.                     img.src = "http://www.pellegrinoprincipe.com/images/html5/richard_stallman.jpg";
  14.                     img.addEventListener("load", function()
  15.                     {
  16.                         // disegniamola alle coordinate x=0 y=0
  17.                         context.drawImage(this, 0, 0);
  18.  
  19.                         // disegniamola prendendo una sua parte e per un numero
  20.                         // determinato di pixel
  21.                         context.drawImage(this, 90, 91, 96, 103, this.width + 15, 10, 96, 103);
  22.  
  23.                         // disegniamola scalandola del 50%
  24.                         context.drawImage(this, this.width + 15, 136, this.width / 2, this.height / 2);
  25.  
  26.                     }, false);
  27.                 }
  28.             }
  29.         }
  30.  
  31.         window.onload = init;
  32.  
  33.     </script>
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: HTML 5 e la localizzazione geografica (1/2)
Successiva: Intel porta Android su piattaforma x86
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.291 secondi.