[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.01,0:00:04.57,Default,,0000,0000,0000,,Il grosso delle interazioni che GRITS ha con Canvas avviene attraverso il rendering delle immagini Dialogue: 0,0:00:04.59,0:00:08.95,Default,,0000,0000,0000,,nel canvas stesso. Per poter disegnare un'immagine nel canvas, dobbiamo prima caricarla. Dialogue: 0,0:00:09.05,0:00:13.20,Default,,0000,0000,0000,,Per caricare un immagine abbiam bisogno di creare un nuovo oggetto immagine, che Dialogue: 0,0:00:13.22,0:00:17.66,Default,,0000,0000,0000,,in Javascript comprende 3 passaggi: numero 1, bisogna dichiarare Dialogue: 0,0:00:17.67,0:00:22.90,Default,,0000,0000,0000,,l'oggetto immagine, numero 2, bisogna definire la sua funzione onload e poi, numero 3, Dialogue: 0,0:00:22.92,0:00:27.27,Default,,0000,0000,0000,,dobbiamo configurare l'attributo 'image.source'. E' bene notare che nel momento in cui Dialogue: 0,0:00:27.28,0:00:31.64,Default,,0000,0000,0000,,si assegna un valore alla proprieta' source, Javascript lancera' Dialogue: 0,0:00:31.65,0:00:35.98,Default,,0000,0000,0000,,la funzione onload. Per questo motivo dobbiamo prima specificare la funzione di callback, Dialogue: 0,0:00:35.99,0:00:40.33,Default,,0000,0000,0000,,prima di preparare l'attributo source, altrimenti l'immagine carichera' i dati Dialogue: 0,0:00:40.34,0:00:42.46,Default,,0000,0000,0000,,e non avra' un callback per riceverli. Dialogue: 0,0:00:42.47,0:00:47.03,Default,,0000,0000,0000,,Diamo ora un'occhiata a questo codice: ecco la URL dell'immagine che vorremmo Dialogue: 0,0:00:47.03,0:00:50.71,Default,,0000,0000,0000,,che tu caricassi. Vorremmo che tu creassi un nuovo oggetto immagine, seguendo Dialogue: 0,0:00:50.71,0:00:54.51,Default,,0000,0000,0000,,i passaggi summenzionati e configurassi la funzione onload e la proprieta' source Dialogue: 0,0:00:54.51,0:00:58.07,Default,,0000,0000,0000,,dell'immagine descritta nel codice. Assicurati che alla funzione onload sia Dialogue: 0,0:00:58.07,0:01:01.69,Default,,0000,0000,0000,,assegnata questa onImageLoad quaggiu', che in effetti stampera' un bel Dialogue: 0,0:01:01.69,0:01:04.77,Default,,0000,0000,0000,,messaggino nel log della console, informandoti del fatto che le cose son state caricate Dialogue: 0,0:01:04.78,0:01:08.31,Default,,0000,0000,0000,,a dovere. Se non ti rendi conto se l'immagine sia stata o meno caricata, Dialogue: 0,0:01:08.31,0:01:12.77,Default,,0000,0000,0000,,non dimenticarti di controllare gli Strumenti per Sviluppatori di Chrome nella scheda "rete", che mostrera' Dialogue: 0,0:01:12.78,0:01:15.99,Default,,0000,0000,0000,,se l'immagine sia stata o meno caricata e quanto ci ha messo.