HOME

Contatti

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS


Immagini non presenti nella pagina web: il metodo drawImage()

Precedente - Indice guida canvas


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

Il tuo browser non supporta il tag HTML5 canvas.


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)
  }

ESEMPIO
var 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
  1. drawImage è la chiamata al metodo che permette di riportare un'immagine nella canvas;
  2. NomeVariabile è il nome della variabile che avete dichiarato;
  3. x è l'ascissa della posizione dell'angolo superiore sinistro dell'immagine;
  4. y è l'ordinata della posizione dell'angolo superiore sinistro dell'immagine;
  5. width è la misura, in pixel, della base dell'immagine;
  6. 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

Il tuo browser non supporta il tag HTML5 canvas.

 

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

 

 

 

 

 



Foto di Tommaso Bientinesi

Passione per i viaggi e la natura





Guida a matematica con javascript: indice  -  Guida al tag HTML5 canvas: indice


©2002 - 2013 www.webfract.it