MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

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

Precedente - Indice guida canvas

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>

PASSO 1

CODICE

var NomeVariabile = new Image;
NomeVariabile.src = 'NomeImmagine.estensione';
NomeVariabile.onload = function() {
   ctx.drawImage(NomeVariabile,x,y,width,height)
  }

var img = new Image;
img.src = 'cuoreG.png';

PASSO 2

CODICE

drawImage(NomeVariabile,x,y,width,height)

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>

Precedente: Immagini presenti nella pagina web

IN EVIDENZA DAL SITO

CALCOLATRICE
SCIENTIFICA


CON SPIEGAZIONI
ED ESEMPI

TARTAMONDO - PER BAMBINI

AREA GIOCHI