Il sito per imparare gratuitamente a fare pagine Web

canvas immagini HTML5

Questa guida è stampabile in modo agevole dalla sua apposita voce: "Download PDF", presente nel menù laterale:
 


Andrea Bianchi © www.web-link.it   Guida HTML 5 - Ver. 1.1.1 

Nella lezione introduttiva abbiamo visto che cosa è un canvas e quali sono le istruzioni javascript per poterlo gestire, adesso vediamo come fare per disegnare al suo interno delle immagini dando per scontato che abbiate letto e compreso la lezione precedente sul disegno delle forme.

 

createLinearGradient(x,y iniziali, x,y finali)

Il metodo createLinearGradient() serve per creare una sfumatura di colore lineare. Una volta dichiarato il rettangolo e creato il gradiente, per inserire i colori si adopera la proprietà addColorStop. All'interno delle parentesi tonde vanno inserite le coordinate del rettangolo con la consueta formula x e y iniziali e x e y finali.

context.rect(0,0,250,150);
context.createLinearGradient(0,0,250,150);


<canvas id="wl" width="250" height="150" style="border: 1px solid #000;">
Il tuo browser non supporta canvas di html5
</canvas>
<script>
var weblink = document.getElementById("wl");
var context = weblink.getContext("2d");
context.beginPath();
context.rect(0,0,250,150);
var color = context.createLinearGradient(0,0,250,150);
color.addColorStop(0,'#006600');
color.addColorStop(1,'#66ff66');
context.fillStyle = color;
context.fill();
</script>


Il tuo browser non supporta canvas di html5

Viene dichiarata una variabile col nome color alla quale viene associato il metodo createLinearGradient, color viene poi usato da addColorStop per gestire l'effetto.



su
 

createRadialGradient(x,y iniziali, inizio rad, x,y finali, fine rad)

Il metodo createRadialGradient() serve per creare una sfumatura di colore radiale. Una volta dichiarato il rettangolo e creato il gradiente, per inserire i colori si adopera la proprietà addColorStop. All'interno delle parentesi tonde vanno inserite le coordinate del rettangolo con la consueta formula x e y iniziali, inizioRadiale, x e y finali, fineRadiale.

context.rect(0,0,250,150);
context.createRadialGradient(120,80,1,120,80,150);


<canvas id="wl" width="250" height="150" style="border: 1px solid #000;">
Il tuo browser non supporta canvas di html5
</canvas>
<script>
var weblink = document.getElementById("wl");
var context = weblink.getContext("2d");
context.beginPath();
context.rect(0,0,250,150);
var color = context.createRadialGradient(120,80,1,120,80,150);
color.addColorStop(0, '#006600');
color.addColorStop(1, '#66ff66');
context.fillStyle = color;
context.fill();
</script>


Il tuo browser non supporta canvas di html5

Viene dichiarata una variabile col nome color alla quale viene associato il metodo createRadialGradient, color vien poi usato da addColorStop per gestire l'effetto.



su
 

addColorStop(offset, colore)

la proprietà addColorStop serve per inserire il colore e stabilire la sua sfumatura, essendo un gradiente, radiale o lineare, necessita di due colori, uno di inizio e l'altro di fine, quindi oltre ai due colori è possibile stabilire da quale iniziare e con quale finire (offset). I valori ammessi sono 0 e 1 per l'offset e qualsiasi valore esadecimale per il colore. Se si inverte l'offset si inverte la direzione della sfumatura.




color.addColorStop(0,'#006600');
color.addColorStop(1,'#66ff66');


Il tuo browser non supporta canvas di html5


color.addColorStop(1,'#006600');
color.addColorStop(0,'#66ff66');


Il tuo browser non supporta canvas di html5

Gli stessi due colori a tinta verde, è sufficiente scambiare il valore 0, 1 (offset) per avere la sfumatura invertita.



su
 

createPattern(oggetto immagine, tipo di repeat)

Il metodo createPattern() serve per inserire una immagine che faccia da sfondo, valgono le stesse regole dei css per quanto riguarda il suo repeat: repeat, repeat-x, repeat-y, no-repeat, se si omette il parametro viene assunto per default repeat.

context.rect(0,0,250,150);
var pattern = context.createPattern(imageObj, 'repeat');
context.fillStyle = pattern;


<canvas id="wl" width="250" height="150" style="border: 1px solid #000;">
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById("wl");
var context = weblink.getContext("2d");
var imageObj = new Image();
context.beginPath();
context.rect(0,0,250,150);
imageObj.onload = function() {
var pattern = context.createPattern(imageObj,"repeat");
context.fillStyle = pattern;
context.fill();};
imageObj.src = "percorso e nome immagine";



Il tuo browser non supporta canvas di html5

Viene dichiarata una variabile col nome pattern alla quale viene associato il metodo createPattern, pattern viene poi usato da fillStyle per riempire il canvas.

Questo il piccolo pattern usato per l'esempio: esempio Per i tipi di immagini valide, valgono le stesse regole di html e css, e cioè: .gif, .png, .jpg.
Il percorso dichiarato per il richiamo dell'immagine grafica può essere di tipo assoluto o relativo.



su
 

drawImage(oggetto immagine, x, y)

Il metodo drawImage() serve per inserire una immagine grafica, i valori x e y servono per stabilire il punto preciso del canvas in cui inserirla facendo riferimento all'angolo superiore sinistro dell'immagine usata.

context.drawImage(imageObj,x,y');;


<canvas id="wl" width="250" height="150" style="border: 1px solid #000;">
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById("wl");
var context = weblink.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj,x,y);
};
imageObj.src = "percorso e nome immagine";



Questa la piccola immagine usata per l'esempio: esempio Per i tipi di immagini valide, valgono le stesse regole di html e css e cioè: .gif, .png, .jpg.
Il percorso dichiarato per il richiamo dell'immagine grafica può essere di tipo assoluto o relativo.


Mi rendo conto che non sia facile seguire la logica del codice di programmazione usato se non si ha un minimo di base sui linguaggi di programmazione. Trovo però del tutto inutile chi io mi metta qui, in questo contesto, a spiegare i passaggi per definire un oggetto in javascript e come utilizzarlo, credo sia sufficiente vedere gli esempi, comprendere il modo di riutilizzarli e senza porsi troppe domande sostituire i riferimenti usati da questa guida con quelli che intendete usare voi. Nell'esempio sopra, non importa capire cosa fa e a cosa serve imageObj.onload ma è sufficiente inserire la vostra immagine, ed il suo percorso per raggiungerla, al posto di quella usata nel mio esempio.



su

Nella prossima lezione si conclude l'argomento canvas spiegando come disegnare il testo.



Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Forum di web-link


Andrea Bianchi