L’immagine, presente nella pagina, può essere referenziata tramite
- document.images
- document.getElementByTagName(“img”)
- document.getElementById(“img_id”)
oppure può essere creata, con un URL qualsiasi, tramite
- var img=new Image();
- img.src=”name.ext”;
Prima di utilizzare l’immagine bisogna essere sicuri che sia stata caricata con
- img.onload=”function () { … }”
Per visualizzare un’immagine esiste drawImage() con 3 scelte per i parametri
- drawImage(img, x, y)
- img, oggetto immagine
- x, la colonna dove visualizzare l’immagine
- y, la riga dove visualizzare l’immagine
- drawImage(img, x,y, w,h)
- img, x,y, …
- w, larghezza dell’immagine visualizzata
- h, altezza dell’immagine visualizzata
- drawImage(img, ix,iy, iw,ih, x,y, w,h)
- img, …
- ix, colonna da dove copiare
- iy, riga da dove copiare
- iw, larghezza da copiare
- ih, altezza da copiare
- x,y,w,h, …
Visualizza l’immagine alla posizione specificata (100,50)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<canvas id="canvas1" width="300" height="200" style="border:1px solid;"></canvas> <script> var cs, c2d; var img=new Image(); img.src="http://www.valcon.it/javascript/wp-content/uploads/1.gif"; img.onload = function() { cs =document.getElementById("canvas1"); c2d=cs.getContext("2d"); c2d.drawImage(img, 100, 50); } |
Visualizza l’immagine 10 volte specificando colonna e riga adeguatamente
|
1 2 3 4 |
... for(riga=0; riga < 2; riga++) for(colonna=0; colonna < 5; colonna++) c2d.drawImage(img, img.width*colonna,img.height*riga); |
Come prima, cambia le dimensioni
|
1 2 |
... c2d.drawImage(img, iw*colonna,ih*riga, iw2,ih2); |
Come prima, carica solo una parte dell’immagine (la metà superiore)
|
1 2 |
... c2d.drawImage(img, 0,0, iw,ih2, iw*colonna,ih*riga, iw,ih2); |
Come prima, la metà viene viene ingrandita
|
1 2 |
... c2d.drawImage(img, 0,0, iw,ih2, iw*colonna,ih*riga, iw,ih); |