Sadržaj
S različitim metodama crtanja viđenim u platno Moguće je definirati područja unutar njih za crtanje, iako je ovo malo složenije, potpuno je izvedivo, međutim također imamo mogućnost postizanja istog rezultata pomoću metode clip ().Drugi aspekt koji se također može uključiti u platno je crtež teksta, možda mislimo da pomoću CSS -a i drugih elemenata možemo nacrtati tekst koji je istog ili boljeg izgleda, međutim, u platno omogućuje nam primjenu izvornih animacija u HTML5.
Metoda isječka
Kao što smo spomenuli na početku, ova metoda pojednostavljuje put do kako možemo stvoriti odjeljak unutar platna, kako biste mogli uvesti druge nacrtane elemente, poput novog crteža ili ga ispuniti određenom bojom.
Za korištenje ovog alata moramo pozvati metodu isječak (), ono što ova metoda radi je stvaranje regije od isječak ili novi odjeljak, da vidimo u sljedećem kodu kako to funkcionira:
Primjer Vaš preglednik ne podržava element platno U ovom kodu prvo nacrtamo veliki pravokutnik žutom bojom, a zatim unutar njega stvaramo novu regiju pomoću metoda clip () i unutar ove regije stvaramo novi crveni pravokutnik.
Pogledajmo kako ovo izgleda u našem pregledniku:
Također možemo nacrtati tekst unutar platna, za to imamo sljedeće metode:
fillText (, x, y, width): Crta i ispunjava tekst naveden u prvom parametru na položaju (x, y). Također, njegov argument širina nije obavezno, ali kada je deklarirano postavlja ograničenje širine teksta.
strokeText (, x, y, width): Crta i ostavlja tekst bez umetanja na poziciji (x, y). Kao i prethodna metoda u svom izbornom argumentu, ona ograničava širinu teksta.
Pogledajmo sljedeći primjer kako koristiti ove metode za crtanje teksta na našem platnu:
Primjer Vaš preglednik ne podržava element platno U ovom kodu koristimo obje metode za crtanje istog teksta, oboje na istom mjestu, ali s drugom bojom pomoću koje postižemo učinak vanjskog okvira jedne boje i ispune druge boje, čime možemo uspostaviti više izrazita razlika između fillText Y strokeText.
Konačno i da završimo ovaj vodič, da vidimo kako to izgleda u pregledniku.
