HTML Canvas

Canvas je HTML5 oznaka koja omogućava crtanje grafike unutar web preglednika koristeći JavaScript i HTML. Kao 2D platforma za crtanje, Canvas pruža set funkcija za kreiranje linija, pravokutnika, lukova, crta, teksta i drugih grafičkih elemenata. Sama oznaka <canvas> nema sadržaj, već se koristi kao “prazan papir” u koji se grafika crta pomoću JavaScript-a. Oznaka može imati samo dimenzije (širinu i visinu), dok je sve ostalo definirano kroz funkcije i metode dostupne putem Canvas API-a.

Canvas API omogućava interakciju s HTML5 <canvas> elementom, omogućujući crtanje grafike. Primarno je namijenjen 2D crtanjima, ali postoji mogućnost rada s 3D grafikom putem WebGL-a. Svaki <canvas> element može imati samo jedan kontekst, a za pristup ovom kontekstu koristi se metoda getContext(). Ovisno o potrebama, kontekst može biti “2d” ili “3d”.

Koordinatni sustav i crtanje objekata

Canvas koristi koordinatni sustav u kojem je početna točka u gornjem lijevom kutu, a svi objekti se crtaju unutar pravokutnog okvira. Da bi se nacrtali oblici poput pravokutnika, koristi se nekoliko funkcija:

  • fillRect(x, y, w, h) – crta ispunjeni pravokutnik

  • strokeRect(x, y, w, h) – crta samo obrub pravokutnika

  • clearRect(x, y, w, h) – briše pravokutnik

Za crtanje linija i drugih oblika koristi se kombinacija metoda kao što su moveTo(), lineTo(), i arc(). Početak svake staze označava se metodom moveTo(), a za povezivanje točaka koristi se lineTo().

Crtanje lukova i krugova

Za crtanje lukova ili kružnica koristi se metoda arc(x, y, radius, startAngle, endAngle, anticlockwise). Parametri ove funkcije omogućuju definisanje centra, polumjera i kutova luka, a smjer crtanja se može postaviti pomoću parametra anticlockwise.

Stilovi crtanja i boje

Za promjenu boje oblika koristi se svojstvo fillStyle za boju ispune i strokeStyle za boju obruba. Također, postoji svojstvo globalAlpha koje omogućuje crtanje prozirnih oblika, gdje se vrijednost može postaviti između 0 (potpuna prozirnost) i 1 (neprozirnost).

Gradijenti

Canvas omogućuje ispunjavanje objekata linearnim ili radijalnim gradijentima putem metoda createLinearGradient() i createRadialGradient(). Ovi gradijenti se mogu koristiti za bojenje objekata s više boja, gdje se boje definiraju pomoću addColorStop().

Tekst

Za rad s tekstom, Canvas nudi metode fillText() i strokeText(), koje omogućuju ispisivanje teksta na Canvasu. Ove metode koriste različite parametre za definiranje pozicije i stila teksta.

Izvori: 

  • Materijali prof. Anice Leventić
Skip to content