WEBnSTUDY.com
HTML Canvas

Objekat HTMLCanvasElement

Sam elemenat Canvas, nam pruža tek najosnovnije mogućnosti. Ipak, bez ovih svojstava i metoda ne bismo mogli ništa da uradimo!

Svojstva
width Širina Canvas elementa u pikselima
height Visina Canvas elementa u pikselima
Metodi
getContext(tip, atributi) Kao rezultat vraća kontekst koji nam služi za crtanje
toDataURL(tip, opcije) Eksportuje canvas u MIME kodiranu sliku
toBlob(funkcija, tip, opcije) Eksportuje canvas u Blob objekat

width
height

Ovo su numerička svojstva pomoću kojih možemo da zadamo ili pročitamo dimenzije Canvasa.

canvas.width = [širina u pikselima];

Ne zaboravite da su ovo realne dimenzije Canvasa, koliko nam je piksela zaista na raspolaganju po horizontali i vertikali. U kojim dimenzijama će Canvas biti prikazan na stranici, zavisi od CSS atributa.

Primer


  // kompletno programsko kreiranje canvasa
  var c1 = document.createElement("canvas");
  c1.width = 400;
  c1.height = 250;
  document.getElementById("kont").appendChild(c1);
  
  // preuzimanja canvasa iz HTML-a
  var c2 = document.getElementById("crtez");
  
  // koordinate centra
  var x = c2.width / 2;
  var y = c2.height / 2;

getContext()

Metod getContext nas u stvari povezuje sa "površinom za crtanje" canvasa. Tek kada iz Canvas elementa "izvučemo" kontekst, možemo da crtamo. Zašto ova komplikacija? Stvar je u tome da po Canvasu možemo da crtamo na više različitih načina - korišćenjem 2D ili 3D grafike. Svaki od ovih načina je specifičan sam za sebe i zahteva sopstvene skupove svojstava i metoda.

var kontekst = canvas.getContext(tip, atributi);

Tip se zadaje kao string. Moguće vrednosti su:

Atributi označavaju dodatne opcije koje kontekt treba da podrži. Zadaju se kao JavaScript objekat, a koja će svojstva objekat imati, zavisi od tipa konteksta. Ovaj parametar nije obavezan. Atributi 2d konteksta za sada imaju samo jednu mogućnost:

Kontekst webgl ima više svojstava i sva su logičkog tipa, odnosno mogu im se zadati samo vrednosti true i false. Svojstva su:

Primer


  // preuzimanja canvasa iz HTML-a
  var can = document.getElementById("crtez");
  
  var cgx = can.getContext("2d");  // uobičajeno
  var cgx = can.getContext("2d", {alpha:true});  // sa atributima
  
  // za 3D grafiku, sa atributima
  var cgx = can.getContext("webgl", {alpha:true, depth:true, antialias:false});

toDataURL()

Pomoću ovog metoda možemo "izvući" trenutnu sliku sa canvasa i to kodiranu u obliku teksta (MIME format). Zahvaljujući tome, možemo je npr. poslati na server ili ubaciti u običan img elemenat.

var data = canvas.toDataURL(tip, opcije);

Parametar tip se zadaje kao string i predstavlja MIME tip slike ("image/png", "image/jpeg", "image/webp"...).

Parametar opcije predstavlja broj između 0 i 1 i u stavri označava kvalitet slike, ako je tip "image/jpeg" ili "image/webp".

Parametri nisu obavezni. Ako se ne navedu, podrazumeva se "image/png" format.

toBlob()

Sliku sa canvasa možemo "izvući" i u Blob objekat.

canvas.toBlob(funkcija, tip, opcije);

Ovaj metod ne vraća vrednost, ali mu se (obavezno) prosleđuje callback funkcija kojoj se onda kao parametar prosleđuje dobijeni Blob objekat. Parametri tip i opcije imaju isto značenje kao kod metoda toDataURL() i nisu obavezni.

Primer


  var can = document.getElementById("crtez");
  var cgx = can.getContext("2d");
  
  var dat = cgx.toDataURL();  // bez parametara - PNG slika
  var dat = cgx.toDataURL("image/jpeg", 0.8);  // JPG slika, kvaliteta 80%

  // kao rezultat se dobija slika u formi teksta, npr:
  // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
  // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
  
  // ako u HTML-u imamo npr. <img id="slika" ... />
  // ove podatke možemo "ubaciti" u nju
  document.getElementById("slika").src = dat;
  

Pogledajte primer za celu lekciju.

  1. Mozilla Developer Network, HTMLCanvasElement
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.