Galerija slik s HTML5 canvas elementom

Share

canvas se uporablja za prikazovanje grafov, slik, teksta, grafik in drugih vizualnih elementov. Uporablja 2D tehniko prikazovanja, namiguje pa se tudi na podporo 3D. canvas se prikaže na strani kot pravokotnik brez kakršne koli obrobe in barve, zato je viden samo če ga oblikujemo z obrobo. Na strani lahko imamo več canvas elementov. Z uporabo identifikatorja jih lahko oblikujemo posamično.

Risanje se opravi s pomočjo JavaScript jezika. Ker se canvas zapiše v DOM brskalnika, ga moramo samo poiskati in naložiti opravila. Rišemo lahko preproste oblike, kot so pravokotniki ali kocke. V elementu se uporabljajo koordinate po pravilu (0,0) – kar nas postavi v zgornji levi kot. Če se premikamo desno ali navzdol, se te vrednosti povečujejo pozitivno. Poleg oblik lahko rišemo poti, ki so podobne črtam v programih za oblikovanje. Poti lahko odebelimo, skrajšamo, zmanjšamo ali pa jim spremenimo barvo. Lahko dodajamo tekst, za katerega veljajo enaka pravila, kot jih poznamo v CSS jeziku. Pri dodajanju slik na platno, moramo paziti, da slika že obstaja in da je naložena na strani. Slikam lahko dodamo tudi prelive, ki se dandanes že pogosto uporabljajo pri oblikovanju spletnih strani.

S canvas elementom lahko dodamo slikam efekt foto papirja. za to bomo najprej potrebovali fotografijo. Spodaj sem vključil fotografijo iz potovanja po Kitajski.

Predstavitev fotografije ni nič kaj privlačna, zato bomo sedaj s pomočjo canvas-a dodali sliki lep efekt in jo malenkost rotirali.