WEBVTT

00:00:00.012 --> 00:00:04.574
Il grosso delle interazioni che GRITS ha con Canvas avviene attraverso il rendering delle immagini

00:00:04.586 --> 00:00:08.953
nel canvas stesso. Per poter disegnare un'immagine nel canvas, dobbiamo prima caricarla.

00:00:09.054 --> 00:00:13.204
Per caricare un immagine abbiam bisogno di creare un nuovo oggetto immagine, che

00:00:13.216 --> 00:00:17.661
in Javascript comprende 3 passaggi: numero 1, bisogna dichiarare

00:00:17.673 --> 00:00:22.905
l'oggetto immagine, numero 2, bisogna definire la sua funzione onload e poi, numero 3,

00:00:22.917 --> 00:00:27.270
dobbiamo configurare l'attributo 'image.source'. E' bene notare che nel momento in cui

00:00:27.282 --> 00:00:31.635
si assegna un valore alla proprieta' source, Javascript lancera'

00:00:31.647 --> 00:00:35.975
la funzione onload. Per questo motivo dobbiamo prima specificare la funzione di callback,

00:00:35.987 --> 00:00:40.326
prima di preparare l'attributo source, altrimenti l'immagine carichera' i dati

00:00:40.338 --> 00:00:42.463
e non avra' un callback per riceverli.

00:00:42.469 --> 00:00:47.033
Diamo ora un'occhiata a questo codice: ecco la URL dell'immagine che vorremmo

00:00:47.033 --> 00:00:50.707
che tu caricassi. Vorremmo che tu creassi un nuovo oggetto immagine, seguendo

00:00:50.707 --> 00:00:54.508
i passaggi summenzionati e configurassi la funzione onload e la proprieta' source

00:00:54.508 --> 00:00:58.069
dell'immagine descritta nel codice. Assicurati che alla funzione onload sia

00:00:58.069 --> 00:01:01.693
assegnata questa onImageLoad quaggiu', che in effetti stampera' un bel

00:01:01.693 --> 00:01:04.766
messaggino nel log della console, informandoti del fatto che le cose son state caricate

00:01:04.778 --> 00:01:08.309
a dovere. Se non ti rendi conto se l'immagine sia stata o meno caricata,

00:01:08.309 --> 00:01:12.767
non dimenticarti di controllare gli Strumenti per Sviluppatori di Chrome nella scheda "rete", che mostrera'

00:01:12.779 --> 00:01:15.988
se l'immagine sia stata o meno caricata e quanto ci ha messo.