22. diel - Štylovanie obrázkov a vloženie textu na plátno v JavaScripte Nové
V predchádzajúcom kvíze, Kvíz - Základná konštrukcia JavaScript, sme si overili nadobudnuté skúsenosti z kurzu.
V dnešnom tutoriále základov JavaScriptu budeme pokračovať v práci s grafikou. Naučíme sa našim kresbám nastaviť rôzne farby alebo zmeniť šírku obrysu a ukážeme si, ako na plátno vložiť externý obrázok a ako v ňom vypísať text.
Štylovanie obrázkov
Aby naše kresby dobre vyzerali, naučíme sa používať štýly.
Rozlišujeme štýly na vyplnenie metódami fill()
a fillRect()
či vykreslenie obrysu metódami
stroke()
a strokeRect()
. Štýly je možné aplikovať
na všetky objekty od obdĺžnikov po kruhy.
V HTML si opäť najskôr pripravíme plátno:
V JavaScripte počkáme na načítanie celej stránky, potom získame element plátna a nastavíme mu kontext:
Namiesto komentára doplníme do predchádzajúceho kódu dva riadky na vykreslenie štvorcov:
Pri ďalších príkladoch už nebudeme uvádzať kód na získanie kontextu plátna a nastavenie poslucháča čakajúceho na načítanie celej stránky.
Vlastnosti strokeStyle
a fillStyle
Pre nastavenie farby máme k dispozícii dve základné vlastnosti, s
ktorými ďalej pracujú metódy stroke()
a fill()
.
Jedná sa o vlastnosť strokeStyle
a fillStyle
. Ako
hodnotu im odovzdávame požadovanú farbu. Farbu môžeme nastaviť pomocou
klasického hexadecimálneho zápisu z CSS, napríklad
#FFA500
pre oranžovú. Je však možné použiť aj RGB
zápis rgb(255, 165, 0)
alebo
rgba(255, 165, 0, 0.5)
.
Posledná hodnota formátu RGBA je tzv. alfa kanál určujúci priehľadnosť. Uvedeným zápisom sme priehľadnosť nastavili na 50 %.
Farbu je možné definovať ďalej vo formáte HSL a HSLA,
ktorý sa používa v CSS3. A poslednou možnosťou je uviesť názov
farby, napríklad green
.
Poďme si pripravené štvorce prefarbiť. Štýly musia byť uvedené vždy
pred samotným vykreslením, teda pred zavolaním metódy
fill()
, stroke()
a podobne:
Výsledok:
Vlastnosť lineWidth
Aby bol náš modrý štvorec lepšie vidieť, ukážeme si ako zväčšiť šírku jeho obrysu. Do kódu vyššie pridáme k nastavovaným farbám tento riadok:
Použili sme tu vlasnosť lineWitdh
volanú na kontexte plátna
a nastavili sme tak šírku čiary na tri pixely.
V prehliadači uvidíme modrý štvorec so širším obrysom:
Štvorec v ceste
Obdĺžnik alebo štvorec môžeme tiež vložiť do cesty. Hoci by sa to na
prvý pohľad mohlo zdať zbytočné, keď máme metódy fillRect()
a strokeRect()
, tak je to veľmi výhodné, keď s ich pomocou
kreslíme zložitejšie tvary. Mohol by to byť obdĺžny domček s
trojuholníkom ako strechou, mriežka vytvorená opakovaným kreslením
štvorcov a podobne. My si nakreslíme krížik zložený zo šiestich
štvorcov.
Všetky štvorce vložíme do cesty, to nám umožní pracovať s výsledným obrázkom ako s jedným objektom. Celý kód môžeme zapísať takto:
Pretože máme všetky štvorce v jednej ceste, poďme ich vyfarbiť. Ukážku doplníme iba o dva riadky a vyfarbíme všetky štvorce naraz:
Než si ukážeme výstup uvedeného kódu, poďme ho ešte vylepšiť.
Veľkosť štvorca, medzery a počiatočný posun uložíme do premenných.
Vytvoríme funkciu, ktorá bude kresliť rovnako veľké štvorce. Bude
prijímať parametre radek
a sloupec
, v ktorých
uvedieme jednoduché súradnice pre daný štvorec. Hodnota 0
bude
znamenať prvý riadok alebo prvý stĺpec, hodnota 1
potom druhý
riadok alebo stĺpec a tak ďalej. Súradnice x
a y
z
nich potom vypočítame v našej funkcii. Prostredný stĺpec potom vykreslíme
pomocou cyklu:
Výstupom oboch uvedených riešení bude tento obrázok:
Externé obrázky
Na plátno samozrejme môžeme vkladať aj iné obrázky uložené v súbore.
Predtým však musí byť načítané, inak sa nevykreslí. Na vykreslenie
obrázku použijeme metódou drawImage()
, ktoré ako parameter
odovzdáme vybraný obrázok. Ďalšie parametre sú voliteľné, na druhom a
treťom mieste zadávame pomocou súradníc, kam chceme obrázok vykresliť.
Metóda drawImage()
prijíma až deväť
parametrov, obrázok potom vie zväčšiť, zmenšiť alebo orezať. Podrobnosti
uvádza oficiálna dokumentácia nazvaná MDN
web docs.
Doplňme do HTML súboru odkaz na tento obrázok obrázok a ako
id
zadajte obrazek
:
Tento obrázok potom vložíme plátno nasledovne:
Výsledok:
V prvom zápise sa stretávame s riešením, v ktorom sú obrázok a plátno
definované staticky priamo v HTML kóde. Tento spôsob je vhodný, keď máme
už v štruktúre stránky vopred pripravené elementy. Obrázok je v tomto
prípade načítaný z existujúceho <img>
elementu, ktorý
je po načítaní stránky pomocou JavaScriptu odstránený z DOM. Vykreslenie
na plátno sa potom deje v momente, keď je okno prehliadača plne načítané,
čo sa spracováva v udalosti load
.
Existuje aj iný prístup, kedy sú obrázok aj plátno vytvorené dynamicky priamo z JavaScriptu:
Element obrázku sme takto vytvorili programovo a nastavili mu vlastnosť
src
, kde uvádzame zdroj obrázku, alternatívny text
(alt
) a id
. Potom sme v udalosti onload
nastavenej na novom obrázku vytvorili plátno, nastavili mu šírku, výšku a
id
. Do HTML stránky sme plátno potom vložili metódou
appendChild()
volanou na document.body
. Obrázok je
tak najskôr načítaný a až potom, čo je dostupný a plátno máme
pripravené vrátane jeho kontextu, vykreslíme ho metódou
drawImage()
.
Vloženie textu
Ukážme si na záver, ako na plátno vypísať text. Budeme chcieť
napríklad pridať watermark k obrázku v našej galérii alebo popisky ku
grafom. Použijeme metódu fillText()
a nastavíme jej text na
vypísanie a súradnice x
, y
. Voliteľne je možné
uviesť maximálnu veľkosť textu.
Jednoduchý text vykreslíme napríklad takto:
Prezrime si výsledok v prehliadači:
Vidíme, že náš text je bez štýlov a navyše je celkom malý. Preto
máme k dispozícii ďalšiu vlastnosť font
, ktorú musíme
podobne ako vlastnosť fillStyle
nastaviť ešte pred vykreslením
textu. Hodnoty, ktoré v tejto vlastnosti nastavujeme sú totožné so zápisom
v CSS pri rovnomennej vlastnosti font
. Nastavme veľkosť textu na
30 pixelov a použime font sans-serif
:
Aby sme náš nápis ešte zvýraznili, zmeníme aj farbu písma a doplníme pred posledný riadok:
Výsledok:
V budúcej lekcii, Verziovací nástroj Git a Visual Studio Code , sa naučíme založiť vzdialený GitHub repozitár a verzovať svoje projekty pomocou základných Git operácií, ktoré nám Visual Studio Code ponúka.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 57x (195.53 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript