Målet med denna uppgift var att fördjupa sig i hur man kan skapa interkation med hjälp av HTML5 och Javascript. Detta skulle vi göra genom att använda canvaselementet.
Jag visste att jag ville skapa ett bildgalleri eftersom det är något jag vill ha på min portfolio så jag kan visa fotografier. Malin Nyström hade samma idé om ett bildgalleri till sin portfolio så vi arbetade tillsammans. Jag skapade ett html-dokument där jag skapade en canvas med id myCanvas, jag satte också storlek och border på den. Jag gick sedan vidare och lärde mig hur man ritar upp en bild på en canvas i Javascript. Detta lärde jag mig på denna sida. När jag fått min bild att visas visste jag att jag ville att fler bilder skulle kunna synas och skapade därför en array med bilder. Eftersom jag ville att man ska kunna navigera i bildgalleriet adderade jag två knappar i mitt html-dokument där man skulle kunna bläddra framåt och bakåt i galleriet. När knapparna tryckts på kallar de på funktioner i mitt Javascript; nextImage och previousImage. När vi skapade funktionerna visste vi att vi ville öka respektive minska med ett indexvärde vid varje knapptryckning. Därför ökar respektvie minskas värdet på image med ett i funktionen innan den ritas upp med drawImage. Vi ville också att när man kommer till sista bilden i arryen och klickar sig framåt så ska bildspelet börja om, lika så om man står på bilden med indexvärde noll och klickar bakåt så ska den sista bilden i arryen visas. Detta löste vi med att inkludera en if-sats i vardera funktion. Se den inskickade filen för närmare beskrivning av koden.
Jag har använde mig av resultatet av denna uppgift för att visa foton jag tagit i denna e-portfolio. De olika bildspelen finner du under "fotogalleri" i kategorin alster.