A rgomenti correlati:
var img = new Image
Viene creato un oggetto immagine e memorizzato nella variabile di nome img
L'oggetto immagine rappresenta un'immagine incorporata.
img.src = 'NomeImmagine.estensione'
Corrisponde al tag HTML <img src = "NomeImmagine.estensione">
In particolare:
img è l'abbreviazione di image (immagine);
src è l'abbreviazione di source (origine, sorgente) e contiene il percorso (URL) in cui il browser troverà il file da mostrare
APPROFONDIMENTO
onload
Evento che accade quando l'oggetto viene completamente caricato.
onload = "codice javascript"
Esegue il comando javascript scritto dopo il segno di uguaglianza quando l'elemento è stato caricato.
Quindi, nel nostro caso, l'immagine viene riprodotta nella posizione desiderata dopo essere stata caricata: se si evita questo comando, può succedere che javascript "salti" il comando e nulla si visualizza.
Simpatiche applicazioni
Codice
-
<canvas id="lavagna2" width="259" height="175"
style="border:1px solid #d3d3d3; background-color:navy;">
Il tuo browser non supporta il tag HTML5 canvas. </canvas>
<script>
var c1=document.getElementById("lavagna2");
var ctx1=c1.getContext("2d");
var img1=new Image;
img1.src = 'stellina1.png';
img1.onload = function() {
var w,h
for (i=0;i<=200;i++){
w=Math.round(Math.random()*c1.width)
h=Math.round(Math.random()*c1.height)
ctx1.drawImage(img1,w,h,img1.width/10,img1.height/10);
}
ctx1.drawImage(img1,4,4);
ctx1.drawImage(img1,156,10,img1.width/2,img1.height/2);
ctx1.drawImage(img1,130,70,img1.width/2,img1.height/2);
ctx1.drawImage(img1,70,150,img1.width/2,img1.height/2);
}
</script>
|
INSERIRE UN'IMMAGINE NON PRESENTE NELLA PAGINA
PASSO 1
Dichiarare l'immagine come variabile, aspettare che si carichi e chiamare il metodo drawImage (). Uutilizzeremo quindi la proprietà onload dell'oggetto immagine.
CODICE var NomeVariabile = new Image;
NomeVariabile.src = 'NomeImmagine.estensione';
NomeVariabile.onload = function() {
ctx.drawImage(NomeVariabile,x,y,width,height)
}
ESEMPIOvar img = new Image;
img.src = 'cuoreG.png';
PASSO 2 Inserire l'immagine nella posizione e con le dimensioni desiderate.CODICE drawImage(NomeVariabile,x,y,width,height) Dove
- drawImage è la chiamata al metodo che permette di riportare un'immagine nella canvas;
- NomeVariabile è il nome della variabile che avete dichiarato;
- x è l'ascissa della posizione dell'angolo superiore sinistro dell'immagine;
- y è l'ordinata della posizione dell'angolo superiore sinistro dell'immagine;
- width è la misura, in pixel, della base dell'immagine;
- height è la misura, in pixel, dell'altezza dell'immagine.
NOTA BENE - Se mancano width e height l'immagine viene inserita con le misure con le quali è memorizzata
ESEMPIO DI CODICE
<canvas id="lavagna1" width="259" height="175">
Il tuo browser non supporta il tag HTML5 canvas. </canvas>
<script>
var c=document.getElementById("lavagna1");
var ctx=c.getContext("2d");
var img=new Image;
img.src = 'scoiattolo.png';
img.onload = function() {
ctx.drawImage(img,4,4);
} </script>
RISULTATO
L'immagine è tratta dal sito di fotografia di Tommaso Bientines
Precedente: Immagini presenti nella pagina web
|
IN EVIDENZA DAL SITO


CALCOLATRICE SCIENTIFICA
CON SPIEGAZIONI ED ESEMPI

TARTAMONDO - PER BAMBINI
AREA GIOCHI




|