HOME

Contatti

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS


Immagini presenti nella pagina web: il metodo drawImage()

Immagini non presenti nella pagina - Indice guida canvas


A
rgomenti correlati:


id

Attributo HTML che serve a identificare univocamente un elemento. Per questo uno stesso id non pu essere attribuito a pi di un elemento nella stessa pagina.

ESEMPIO DI SINTASSI:
<canvas id = "identificatore">


document.getElementById

Restituisce l'elemento con l'identificatore indicato in parentesi.

SINTASSI: document.getElementById("identificatore")
Sostituire al posto di identificatore l'id dell'elemento a cui volete accedere.


Simpatiche applicazioni


Spiegazioni

Operiamo una traslazione degli assi che porti l'origine alla base del cuore:

Ruotiamo per 3 volte l'immagine di 90 in senso antiorario.


Codice

<html>
<body>
<img src="http://www.webfract.it/MATJAVA/GuidaCanvas/cuoreG.png" id = "cuore">
<canvas id="lavagna" width="300" height="300">
Il tuo browser non supporta the "canvas" tag
</canvas>
<script>
var Cx,Cy; //centro di rotazione
var img = document.getElementById("cuore");
var c = document.getElementById('lavagna');
var ctx=c.getContext("2d");
//Posizione centro di rotazione rispetto
all'angolo in alto a destra dell'immagine
Cx = 50
Cy = -98
Ox=(c.width-img.width)/2 + Cx; //ascissa origine
Oy=c.height/2-img.height - Cy; //ordinata origine
for (i=1;i<=3;i++){
ctx.rotate(-Math.PI/2)
ctx.drawImage(img,-Cx,Cy)
}
</script>
</body>
</html>




ESEMPIO    

Il cuore che vedete in alto a sinistra un'immagine.
Nel primo caso l'abbiamo ruotato per 6 volte di un angolo di 60, mentre nel secondo caso lo abbiamo ruotato per 5 volte di un angolo di 72.

Visto che l'immagine di partenza trasparente le parti sovrapposte formano una simpatica decorazione.

Nell'esempio abbiamo introdotto due semplici trasformazioni per dimostrare che, con HTML5 canvas e javascript, anche alle immagini possono essere applicati molti metodi.

INSERIRE UN'IMMAGINE GIA' PRESENTE NELLA PAGINA    

PREMESSA

L'immagine deve essere fornita di un id.

Ad esempio, l'immagine a destra stata inserita con il codice
<img src="cuoreG.png" id ="cuore1" width="100" height="100">

PASSO 1

Basta richiamarla con il metodo document.getElementById()

CODICE

var NomeVariabile = document.getElementById("cuore1");

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="lavagna" width="120" height="120">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>
<script>
var c=document.getElementById("lavagna");
var ctx=c.getContext("2d");
var img=document.getElementById("cuore1");
ctx.drawImage(img,10,10);
</script>
}

RISULTATO

Il tuo browser non supporta il tag HTML5 canvas.

 


 

Successivo: Immagini non presenti nella pagina web

IN EVIDENZA DAL SITO

 







CALCOLATRICE
SCIENTIFICA



CON SPIEGAZIONI
ED ESEMPI

 




TARTAMONDO - PER BAMBINI




AREA GIOCHI

 

 

 

 

 


www.tommasobientinesi.it

La passione per i viaggi e la natura nel nuovo sito di Tommaso Bientinesi





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


©2002 - 2013 www.webfract.it